螞蟻設計：將菜單項包裝到自定義組件中

Question

我正在研究螞蟻設計，並試圖構建一個簡單的菜單，並且一切都按預期工作：

<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 : onItemHover 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> );