Question

我希望能够根据用户是否通过身份验证来返回多个菜单项。我用于此Ant设计的UI库。

尝试：

{
  this.props.isAuthenticated ?
    <React.Fragment>
       <Menu.Item key="1" onClick={this.props.logout}>
          Logout
        </Menu.Item>
        <Menu.Item key="3">
            <Link to="/">Posts</Link>
        </Menu.Item>
     </React.Fragment>
                      :
        <Menu.Item key="2">
           <Link to="/login">Login</Link>
        </Menu.Item>
}

但是，当我这样做时，它将中断我的菜单并显示“ ...”代替导航菜单选项。另外，值得注意的是，这是antdesign的已知问题： https://github.com/ant-design/ant-design/issues/10688

是否可以解决此问题，还是必须切换UI库？谢谢

Answer 1

您可以使用数组，而不是React.Fragment

<Menu>
  {this.props.isAuthenticated ? (
    [
      <Menu.Item key="1">
        <span>Option 1</span>
      </Menu.Item>,
      <Menu.Item key="2">
        <span>Option 2</span>
      </Menu.Item>
    ]
  ) : (
    <Menu.Item key="3">
      <span>Option 3</span>
    </Menu.Item>
  )}
</Menu>

Codesandbox link。更好的解决方案是将逻辑移到getMenuItems函数中，然后将所需的Menu.Item s作为数组返回。

如何在一个三元表达式中返回多个Menu.Items

1 个答案: