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之前神奇地传递给s 的道具（如 aclsPrefix或onItemHover-callback）：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> );