Дизайн Ant: обертывание пункта меню в пользовательский компонент

Question

Я играю с ant-design и пытаюсь структурировать простое меню, и все работает как положено:

<Menu mode="inline">
  <Menu.Item key="/">
    <Icon type="dashboard" theme="outlined" />
    Dashboard
  </Menu.Item>
  <Menu.Item key="/transactions">
    <Icon type="bars" theme="outlined" />
    Transactions
  </Menu.Item>
  <Menu.Item key="/groups">
    <Icon type="team" theme="outlined" />
    Groups
  </Menu.Item>
  <Menu.Item key="/account">
    <Icon type="idcard" theme="outlined" />
    Account
  </Menu.Item>
</Menu>

(https://codesandbox.io/s/wqn37ojmv7)

Теперь я хотелНемного высушите этот код, создав отдельный обернутый MenuItem компонент:

const MenuItem = ({route, icon, children}) => (
  <Menu.Item key={route}>
    <Icon type={icon} theme="outlined" />
    {children}
  </Menu.Item>
);

// ...
<Menu mode="inline">
  <MenuItem route="/" icon="dashboard">Dashboard</MenuItem>
  <MenuItem route="/transactions" icon="bars">Transactions</MenuItem>
  <MenuItem route="/groups" icon="team">Groups</MenuItem>
  <MenuItem route="/account" icon="idcard">Account</MenuItem>
</Menu>

Однако замена моего нового блестящего компонента в значительной степени сломает все - почему-то я теряю некоторые реквизиты, которые были магическим образом переданына Menu.Item с (как clsPrefix или обратный вызов onItemHover): https://codesandbox.io/s/ojyqy0oqq6

Что здесь происходит? Как эти реквизиты проходят за кулисами и как я могу обернутьMenu.Item правильно, не теряя всей этой магии?

Answer 1

Вы можете передать остальные пропущенные реквизиты

const MenuItem = ({route, icon, children, ...props}) => ( 
    <Menu.Item key={route} {...props}> 
        <Icon type={icon} theme="outlined" />
        {children}
    </Menu.Item> );