React中Ant Design 4.21 Menu如何右对齐项、条件隐藏菜单项

1. 指定菜单项右对齐 #

Ant Design 4.x 版本的Menu组件items配置项支持直接透传className、style属性到最终渲染的菜单项DOM节点，不需要额外覆写组件结构。
水平模式的Menu默认使用flex布局，给第一个需要靠右展示的菜单项添加marginLeft: 'auto'样式，该菜单项和它之后的所有菜单项就会自动被推到导航栏最右侧。如果需要自定义间距、分隔线等复杂样式，给菜单项加自定义类名写对应CSS即可。

2. 菜单项条件隐藏 #

不要在组件外部写死固定的items数组，把items的生成逻辑放到组件内部，根据登录状态动态过滤/拼接菜单项即可，这种实现方式比加display: none隐藏DOM更干净，不会产生冗余节点。
比如用户已登录时，直接剔除登录、注册两个菜单项，未登录时剔除用户设置的下拉菜单项即可。

修改后可直接运行的代码 #

import { HomeOutlined, SettingOutlined, LoginOutlined, UserAddOutlined} from '@ant-design/icons';
import { Menu } from 'antd';
import { useState } from 'react';

const Header = () => {
    const [current, setCurrent] = useState('home');
    // 实际项目中这个值可以从全局状态、localStorage、接口返回中获取
    const [isLoggedIn, setIsLoggedIn] = useState(false);

    const onClick = (e) => {
        setCurrent(e.key);
    };

    // 动态生成菜单项
    const generateMenuItems = () => {
        // 基础公共菜单项，始终靠左展示
        const baseItems = [
            {
                label: 'Home',
                key: 'home',
                icon: <HomeOutlined />,
            }
        ];

        // 已登录状态追加用户设置菜单
        if (isLoggedIn) {
            baseItems.push({
                label: 'Username',
                key: 'SubMenu',
                icon: <SettingOutlined />,
                children: [
                    {
                        type: 'group',
                        children: [
                            {
                                label: 'Option 1',
                                key: 'setting:1',
                            },
                            {
                                label: 'Option 2',
                                key: 'setting:2',
                            },
                        ],
                    },
                ],
            });
        }

        // 未登录状态追加登录、注册菜单，给登录项加marginLeft:auto实现右对齐
        if (!isLoggedIn) {
            baseItems.push(
                {
                    label: 'Login',
                    key: 'login',
                    icon: <LoginOutlined />,
                    // 该行样式实现两个菜单项整体右对齐效果
                    style: { marginLeft: 'auto' }
                },
                {
                    label: 'Register',
                    key: 'register',
                    icon: <UserAddOutlined />,
                }
            );
        }

        return baseItems;
    };

    return (        
        <Menu 
            onClick={onClick} 
            selectedKeys={[current]} 
            mode="horizontal"  
            items={generateMenuItems()} 
        />
    );
};

export default Header;

如果需要调整右对齐菜单项的样式，把内联style换成自定义className，单独写CSS控制即可，和普通DOM元素的样式写法没有区别。

内容的提问来源于stack exchange，提问作者rgustv