ANTD 4.21菜单上的React Artign Acrign/Hide项目

Question

有什么方法可以添加不同的类或属性以对齐此 ant Design的2个项目顶级导航菜单？我还可以有条件隐藏一个物品？即，如果有一个用户登录，我想隐藏一个项目。

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/menu/menu/# API

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

谢谢

Answer 1

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

{checkedCondition &&

    <Menu type one .../>
}

{uncheckedCondition &&

    <Menu type two .../>

}