Войти с помощью github
Форум /

В react'е пока "плаваю". Наверняка глупый вопрос:

Не могу найти способ "примешать" чужой компонент к своему. Т.е., задача в том, чтобы на одном DOM-узле находилось два компонента. Последняя конкретная ситуация:

Блок NavBar имеет элемент Menu, в который вложен набор элементов MenuItem. Использую Material-UI: в Menu вкладываю MuiMenuList, в MenuItem -- MuiMenuItem.

В итоге получаю такую структуру:

<div class="NavBar-Menu">
  <div class="MuiList...">
    <div class="NavBar-MenuItem">
      <div class="MuiListItem...">...</div>
    </div>
    <!-- ... -->
  </div>
</div>

Могу ли примешивать для NavBar-Menu и NavBar-MenuItem примешивать соотв. MuiMenuList и MuiMenuItem, вместо вкладывания чилдренов в методе content()?

Т.е., чтобы в итоге получалось:

<div class="NavBar-Menu MuiList...">
  <div class="NavBar-MenuItem MuiListItem...">...</div>
  <!-- ... -->
</div>

Как?

UPD: На всякий случай: приходило в голову пытаться как-то наследовать помимо Elem, ещё и от MUI-шного класса, но абсолютно не понимаю, как подсовывать нужные параметры. Сейчас это выглядит так:

export default class NavBarMenuItem extends Elem<INavBarMenuItemProps, INavBarMenuItemState> {
  public block = 'NavBar';
  public elem = 'MenuItem';
  public content() {
    return (
      <MuiMenuItem
        id={String(this.props.no)}
        selected={this.props.selected}
        onClick={this.props.onClick}
        classes={{
          root: `${this.block}-${this.elem}Mui`,
          selected: `${this.block}-${this.elem}Mui_selected`,
        }}
      >{this.props.children}</MuiMenuItem>
    );
  }
}

(MenuItemMui* -- Это, чтобы иметь возможность стилизовать создаваемый компонент.