Есть эл-т NavBar-MenuItem
, добавляем модификатор _hasSubmenu
. Примерно так:
//...
import INavBarMenuItemProps from '../NavBar-MenuItem';
export interface INavBarMenuItemHasSubmenuProps extends INavBarMenuItemProps {
hasSubmenu?: boolean;
menu?: Array<{}>;
}
export default class NavBarMenuItemHasSubmenu<P extends INavBarMenuItemHasSubmenuProps> extends Elem<P> {
public block = 'NavBar';
public elem = 'MenuItem';
public static mod = ({ hasSubmenu }: INavBarMenuItemHasSubmenuProps) => hasSubmenu === true;
public elemMods() {
const {hasSubmenu} = this.props;
return {
...super.mods(),
hasSubmenu,
};
}
// ...
}
Пробовал по-разному, напр., NavBarMenuItemHasSubmenu extends Elem<INavBarMenuItemHasSubmenuProps>
, ещё как-то.
При использовании в родительском эл-те ругается на отсутствие свойств в определении props у родительского или модифицированного элемента. Напр.:
[tsl] ERROR in .../src/blocks/NavBar/Menu/NavBar-Menu.tsx(138,15)
TS2339: Property 'no' does not exist on type '(IntrinsicAttributes & ClassAttributes<{} | EntityProps<INavBarMenuItemHasMenuProps>> & IBemProps...'.
(no
-- свойство расширяемого NavBar-MenuItem
.)
В NavBar-Menu
Делаем так:
// ...
import MenuItem from '../MenuItem/NavBar-MenuItem';
import hasMenu from '../MenuItem/_hasMenu/NavBar-MenuItem_hasMenu';
const MenuItemWithMods = withMods(MenuItem, hasMenu);
// ...
export default class NavBarMenu extends Elem<INavBarMenuProps, INavBarMenuState> {
public block = 'NavBar';
public elem = 'Menu';
// ...
public content() {
const {menuItems, selectedNo, showDebugMsg, debugMsg} = this.state;
return (
<MuiMenuList classes={{root: this.block + '-MenuContainer'}}>
{Array.isArray(menuItems) && menuItems.map(({id, text, menu}, no) => {
const hasMenu = Array.isArray(menu);
return (
<MenuItemWithMods
hasMenu={hasMenu}
menu={menu}
key={no}
no={String(no)}
selected={selectedNo === no}
onClick={this.handleClick}
>{text}</MenuItemWithMods>
);
}, this)}
</MuiMenuList>
);
}
}
Как правильно дополнять описания пропсов для модификатора элемента?
Как писал в комменте к предыдущему посту, лучше не использовать эту версию bem-react-core и переходить на
v3
: https://youtu.be/pVzlkCidOYgНашёл. Неправильно был написан импорт proptypes родителя:
Надо было, конечно:
Испортировалось и экстендилось не то, соотв., родительские пропсы терялись.
Доп. вопрос: есть ли возможность отслеживать (на уровне ts?) такие ошибки? Напр., проверять, что мы импортировали именно определение типов props или state?
В одном месте подсказка была: когда мне говорилось что-то вроде, что "...не найдено в
NavBarMenuItem
" -- т.е., в самом классе элемента...