bem-react-core: Примесь компонентов.

[lilliputten]

В 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* -- Это, чтобы иметь возможность стилизовать создаваемый компонент.

[tadatuta]

Привет!

Плохая новость в том, что в bem-react-core@v2 была обнаружена серьезная архитектурная проблема. В результате приняли решение эту версию не развивать :(

Хорошая новость, что написали bem-react@3. Подробнее см. https://youtu.be/pVzlkCidOYg

[lilliputten]

@tadatuta Ого как! Насколько беспроблемно будет обновиться в рамках проекта, развёрнутого на последнем bem-react-boilerplate? (Не вижу там традиционного документа про миграции.)

UPD: В npm версии v3 не вижу, в клонированном пакете не вижу скрипта (смотрю в package.json) для сборки build. Как подключать/использовать? UPD: Нашёл в командах travis: lerna run build -- так, да?

И -- можно ли всё же где-то список отличий/миграций увидеть?

[lilliputten]

Наверное, лучше подождать появления в npm? Или можно где-то взять собранное?

Похоже, у меня ничего не собирается. :( См. OH NOES! -- это так должно быть? Выводит такое (на win64):

$ lerna run build
info cli using local version of lerna
lerna notice cli v3.2.0
lerna info versioning independent
lerna info Executing command in 3 packages: "npm run build"

> @bem-react/di@1.0.0 build .../bem-react-core@v3/packages/di
> set PKG=di && node ../../scripts/rollup/build.js

 BUILDING  di .development.js (cjs)
 BUILDING  di .production.min.js (cjs)
 OH NOES!  di .development.js (cjs)
 OH NOES!  di .production.min.js (cjs)

> @bem-react/classname@1.0.0 build .../bem-react-core@v3/packages/classname
> set PKG=classname && node ../../scripts/rollup/build.js

 BUILDING  classname .development.js (cjs)
 BUILDING  classname .production.min.js (cjs)
 OH NOES!  classname .development.js (cjs)
 OH NOES!  classname .production.min.js (cjs)

> @bem-react/core@1.0.0 build .../bem-react-core@v3/packages/core
> set PKG=core && node ../../scripts/rollup/build.js

 BUILDING  core .development.js (cjs)
 BUILDING  core .production.min.js (cjs)
 OH NOES!  core .development.js (cjs)
 OH NOES!  core .production.min.js (cjs)
lerna success run Ran npm script 'build' in 3 packages:
lerna success - @bem-react/classname
lerna success - @bem-react/core
lerna success - @bem-react/di

Во всяком случае, ничего похожего на результаты не вижу. В папках packages/* вообще ничего нового не появляется.

Кстати, есть странность: в package.json пакета ветки v3 написано:

  "version": "4.0.0",

Это что-то значит? Или обшибка?

Наверное, пока остаюсь на bem-react-core@v2, раз так всё? Когда ожидается к.-то выкат?

[tadatuta]

есть смысл посмотреть видео по ссылке. там теперь несколько отдельных пакетов, которые нужно ставить отдельно