在 ANTD 4.21 菜单上反应右对齐/隐藏项目答案

【问题标题】：React align right/hide items on ANTD 4.21 Menu在 ANTD 4.21 菜单上反应右对齐/隐藏项目
【发布时间】：2022-09-25 14:30:56
【问题描述】：

有没有办法可以添加不同的类或属性来对齐这两个项目蚂蚁设计顶部导航菜单？另外我怎样才能有条件地隐藏一个项目？ IE 如果有用户登录，我想隐藏一个项目。

import { HomeOutlined, SettingOutlined, LoginOutlined, UserAddOutlined} from \'@ant-design/icons\';
import { Menu } from \'antd\';
import { useState } from \'react\';
const items = [
    {
        label: \'Home\',
        key: \'home\',
        icon: <HomeOutlined />,
    },  
    {
        label: \'Username\',
        key: \'SubMenu\',
        icon: <SettingOutlined />,
        children: [
            {
                type: \'group\',
                children: [
                    {
                        label: \'Option 1\',
                        key: \'setting:1\',
                    },
                    {
                        label: \'Option 2\',
                        key: \'setting:2\',
                    },
                ],
            },
        ],
    },
    {
        label: \'Login\',
        key: \'login\',
        icon: <LoginOutlined />
    },
    {
        label: \'Register\',
        key: \'register\',
        icon: <UserAddOutlined />,
        

    },
];
const Header = () => {
    const [current, setCurrent] = useState(\'home\');
    const onClick = (e) => {
        setCurrent(e.key);
    };
    return (        
        <Menu onClick={onClick} selectedKeys={[current]} mode=\"horizontal\"  items={items} />
    );
};

export default Header;

我正在使用 ant design 的顶部导航菜单：https://ant.design/components/menu/#API

我检查了他们的文档和其他地方，但我似乎无法弄清楚。我将不胜感激任何帮助。

谢谢

标签： css reactjs navigation menuitem ant-design-pro

【解决方案1】：

我不知道现在回复是否为时已晚:) 据我所知，没有“单线”解决方案。您应该使用条件 JSX 使用 JS 创建条件。例如（在 JSX 中，在 React 组件的返回表达式中）：

{checkedCondition &&

    <Menu type one .../>
}

{uncheckedCondition &&

    <Menu type two .../>

}

【讨论】：