{"action":"created","issue":{"url":"https://api.github.com/repos/bem-site/bem-forum-content-ru/issues/1530","repository_url":"https://api.github.com/repos/bem-site/bem-forum-content-ru","labels_url":"https://api.github.com/repos/bem-site/bem-forum-content-ru/issues/1530/labels{/name}","comments_url":"https://api.github.com/repos/bem-site/bem-forum-content-ru/issues/1530/comments","events_url":"https://api.github.com/repos/bem-site/bem-forum-content-ru/issues/1530/events","html_url":"https://github.com/bem-site/bem-forum-content-ru/issues/1530","id":363748308,"node_id":"MDU6SXNzdWUzNjM3NDgzMDg=","number":1530,"title":"bem-react-core: Как правильно наследовать и передавать типы props для модификатора элемента?","user":{"login":"lilliputten","id":6855837,"node_id":"MDQ6VXNlcjY4NTU4Mzc=","avatar_url":"https://avatars2.githubusercontent.com/u/6855837?v=4","gravatar_id":"","url":"https://api.github.com/users/lilliputten","html_url":"https://github.com/lilliputten","followers_url":"https://api.github.com/users/lilliputten/followers","following_url":"https://api.github.com/users/lilliputten/following{/other_user}","gists_url":"https://api.github.com/users/lilliputten/gists{/gist_id}","starred_url":"https://api.github.com/users/lilliputten/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/lilliputten/subscriptions","organizations_url":"https://api.github.com/users/lilliputten/orgs","repos_url":"https://api.github.com/users/lilliputten/repos","events_url":"https://api.github.com/users/lilliputten/events{/privacy}","received_events_url":"https://api.github.com/users/lilliputten/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":1,"created_at":"2018-09-25T20:15:33Z","updated_at":"2018-09-26T13:59:41Z","closed_at":null,"author_association":"NONE","body":"Есть эл-т `NavBar-MenuItem`, добавляем модификатор `_hasSubmenu`. Примерно так:\n\n```javascript\n//...\nimport INavBarMenuItemProps from '../NavBar-MenuItem';\nexport interface INavBarMenuItemHasSubmenuProps extends INavBarMenuItemProps {\n  hasSubmenu?: boolean;\n  menu?: Array<{}>;\n}\nexport default class NavBarMenuItemHasSubmenu<P extends INavBarMenuItemHasSubmenuProps> extends Elem<P> {\n  public block = 'NavBar';\n  public elem = 'MenuItem';\n  public static mod = ({ hasSubmenu }: INavBarMenuItemHasSubmenuProps) => hasSubmenu === true;\n  public elemMods() {\n    const {hasSubmenu} = this.props;\n    return {\n      ...super.mods(),\n      hasSubmenu,\n    };\n  }\n  // ...\n}\n```\n\nПробовал по-разному, напр., `NavBarMenuItemHasSubmenu extends Elem<INavBarMenuItemHasSubmenuProps>`, ещё как-то.\n\nПри использовании в родительском эл-те ругается на отсутствие свойств в определении props у родительского или модифицированного элемента. Напр.:\n\n```log\n[tsl] ERROR in .../src/blocks/NavBar/Menu/NavBar-Menu.tsx(138,15)\n      TS2339: Property 'no' does not exist on type '(IntrinsicAttributes & ClassAttributes<{} | EntityProps<INavBarMenuItemHasMenuProps>> & IBemProps...'.\n```\n(`no` -- свойство расширяемого `NavBar-MenuItem`.)\n\nВ `NavBar-Menu` Делаем так:\n```javascript\n// ...\nimport MenuItem from '../MenuItem/NavBar-MenuItem';\nimport hasMenu from '../MenuItem/_hasMenu/NavBar-MenuItem_hasMenu';\nconst MenuItemWithMods = withMods(MenuItem, hasMenu);\n// ...\nexport default class NavBarMenu extends Elem<INavBarMenuProps, INavBarMenuState> {\n  public block = 'NavBar';\n  public elem = 'Menu';\n  // ...\n  public content() {\n    const {menuItems, selectedNo, showDebugMsg, debugMsg} = this.state;\n    return (\n      <MuiMenuList classes={{root: this.block + '-MenuContainer'}}>\n        {Array.isArray(menuItems) && menuItems.map(({id, text, menu}, no) => {\n          const hasMenu = Array.isArray(menu);\n          return (\n            <MenuItemWithMods\n              hasMenu={hasMenu}\n              menu={menu}\n              key={no}\n              no={String(no)}\n              selected={selectedNo === no}\n              onClick={this.handleClick}\n            >{text}</MenuItemWithMods>\n          );\n        }, this)}\n      </MuiMenuList>\n    );\n  }\n}\n```\n\nКак правильно дополнять описания пропсов для модификатора элемента?"},"comment":{"url":"https://api.github.com/repos/bem-site/bem-forum-content-ru/issues/comments/424725915","html_url":"https://github.com/bem-site/bem-forum-content-ru/issues/1530#issuecomment-424725915","issue_url":"https://api.github.com/repos/bem-site/bem-forum-content-ru/issues/1530","id":424725915,"node_id":"MDEyOklzc3VlQ29tbWVudDQyNDcyNTkxNQ==","user":{"login":"lilliputten","id":6855837,"node_id":"MDQ6VXNlcjY4NTU4Mzc=","avatar_url":"https://avatars2.githubusercontent.com/u/6855837?v=4","gravatar_id":"","url":"https://api.github.com/users/lilliputten","html_url":"https://github.com/lilliputten","followers_url":"https://api.github.com/users/lilliputten/followers","following_url":"https://api.github.com/users/lilliputten/following{/other_user}","gists_url":"https://api.github.com/users/lilliputten/gists{/gist_id}","starred_url":"https://api.github.com/users/lilliputten/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/lilliputten/subscriptions","organizations_url":"https://api.github.com/users/lilliputten/orgs","repos_url":"https://api.github.com/users/lilliputten/repos","events_url":"https://api.github.com/users/lilliputten/events{/privacy}","received_events_url":"https://api.github.com/users/lilliputten/received_events","type":"User","site_admin":false},"created_at":"2018-09-26T13:59:41Z","updated_at":"2018-09-26T13:59:41Z","author_association":"NONE","body":"Нашёл. Неправильно был написан импорт proptypes родителя:\r\n```js\r\nimport INavBarMenuItemProps from '../NavBar-MenuItem';\r\n```\r\nНадо было, конечно:\r\n```js\r\nimport {INavBarMenuItemProps} from '../NavBar-MenuItem';\r\n```\r\nИспортировалось и экстендилось не то, соотв., родительские пропсы терялись.\r\n\r\nДоп. вопрос: есть ли возможность отслеживать (на уровне ts?) такие ошибки? Напр., проверять, что мы импортировали именно определение типов props или state?"}}
{"actor":{"display_login":"lilliputten"}}