Ant Design 菜单和菜单项自定义

Question

我想制作如下所示的 Menu.Item 组件，但效果不佳...

Nav.js

<Menu mode="horizontal" defaultSelectedKeys={[URL]}>
  <LeftMenu />
  <RightMenu />
</Menu>

LeftMenu.js

<React.Fragment>
  <Menu.Item key="notice" {...props}>
    <Link to='/notice/board'>Notice</Link>
  </Menu.Item>
  <Menu.Item key="about" {...props}>
    <Link to='/about'>About Us</Link>
  </Menu.Item>
  <Menu.Item key="detail" {...props}>
    <Link to="/detail/room-info">Room</Link>
  </Menu.Item>
  <Menu.Item key="reservation" {...props}>
    <Link to='/reservation'>Reservation</Link>
  </Menu.Item>
  <Menu.Item key="contact" {...props}>
    <Link to='/contact/board'>Contact</Link>
  </Menu.Item>
</React.Fragment>

Answer 1

在 github 上有一个issue 关于这个话题。

你可以像这样使用菜单

<Menu mode="horizontal" defaultSelectedKeys={[URL]}>
  {LeftMenu()}
  {RightMenu()}
</Menu>