[英]Ant design: Wrapping a menu item into a custom component
我正在研究蚂蚁设计,并试图构建一个简单的菜单,并且一切都按预期工作:
<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
?
您可以传递其余传递的道具
const MenuItem = ({route, icon, children, ...props}) => (
<Menu.Item key={route} {...props}>
<Icon type={icon} theme="outlined" />
{children}
</Menu.Item> );
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.