javascript - Ant design: Wrapping a menu item into a custom component - Stack Overflow

admin管理员组

文章数量:1326287

I'm playing around with ant-design and trying to structure a simple menu, and everything works as expected:

<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>

()

Now, I wanted to DRY up this code a bit, by making a separate wrapped MenuItem ponent:

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>

However, substituting my shiny new ponent will pretty much break everything - somehow I seem to lose some props that were magically passed to the Menu.Items before (like a clsPrefix or a onItemHover-callback):

What is going on here? How are these props passed behind the scenes and how can I wrap Menu.Item correctly without losing all of this magic?

I'm playing around with ant-design and trying to structure a simple menu, and everything works as expected:

<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)

Now, I wanted to DRY up this code a bit, by making a separate wrapped MenuItem ponent:

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>

However, substituting my shiny new ponent will pretty much break everything - somehow I seem to lose some props that were magically passed to the Menu.Items before (like a clsPrefix or a onItemHover-callback): https://codesandbox.io/s/ojyqy0oqq6

What is going on here? How are these props passed behind the scenes and how can I wrap Menu.Item correctly without losing all of this magic?

• javascript
• reactjs
• antd

Share Improve this question Follow edited Oct 17, 2018 at 6:20 Kas Elvirov 8,00044 gold badges4646 silver badges6565 bronze badges asked Oct 15, 2018 at 18:09 DeX3DeX3 5,56977 gold badges4646 silver badges7070 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 10

You could pass the rest of the passed props

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

本文标签： javascriptAnt design Wrapping a menu item into a custom componentStack Overflow