点击Antd下拉菜单触发React.Children.only错误求助（v5.6.1）

问题描述 #

使用Antd 5.6.1和Create React App开发导航栏时，导航栏包含两个下拉菜单：

• 第一个下拉菜单点击后正常渲染对应菜单项
• 第二个下拉菜单点击时触发错误：React.Children.only expected to receive a single React element child
  尝试用<React.Fragment>包裹元素，问题依旧。

问题原因 #

第二个Dropdown组件的menu配置项键名错误。Antd的Dropdown组件要求menu对象中使用items来定义菜单项数组，而第二个Dropdown写成了menu={{ menuItems }}，导致组件无法正确识别菜单项结构，引发渲染错误。

修复代码 #

将第二个Dropdown的menu配置从menu={{ menuItems }}修改为menu={{ items: menuItems }}，修复后的关键代码如下：

// 第二个Dropdown的修复部分
<li>
    <Dropdown
        menu={{
            items: menuItems, // 这里把menuItems改为items: menuItems
        }}
        placement="bottom"
        arrow
        trigger={['click']}
    >
        <Button type="text" size='large'>
            <Space>
                <QuestionCircleOutlined style={{ fontSize: '24px' }} />
                Help
                <svg class="w-4 h-4 ml-2" aria-hidden="true" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg>
            </Space>
        </Button>
    </Dropdown>
</li>

完整修复后的组件代码：

import { UserOutlined, HeartOutlined, ShoppingCartOutlined, QuestionCircleOutlined, ShopOutlined } from '@ant-design/icons';
import { Button, Divider, Dropdown, Space, theme } from 'antd';
import React from 'react';
const { useToken } = theme;

const menuItems = [
    {
        key: '1',
        label: (
            <a target="_blank" rel="noopener noreferrer" href="https://www.antgroup.com">
                Place and Track Order
            </a>
        ),
    },
    {
        key: '2',
        label: (
            <a target="_blank" rel="noopener noreferrer" href="https://www.aliyun.com">
                Order Cancellation
            </a>
        ),
    },
    {
        key: '3',
        label: (
            <a target="_blank" rel="noopener noreferrer" href="https://www.luohanacademy.com">
                Returns and Refunds
            </a>
        ),
    },
    {
        key: '4',
        label: (
            <a target="_blank" rel="noopener noreferrer" href="https://www.luohanacademy.com">
                Payments and Jumia Account
            </a>
        ),
    },
    {
        key: '5',
        label: (
            <a target="_blank" rel="noopener noreferrer" href="https://www.luohanacademy.com">
                Help Center
            </a>
        ),
    },
];

const items = [
    {
        key: '5',
        icon: <UserOutlined />,
        label: (
            <a target="_blank" rel="noopener noreferrer" href="https://www.antgroup.com">
                MyAccount
            </a>
        ),
    },
    {
        key: '6',
        icon: <ShopOutlined />,
        label: (
            <a target="_blank" rel="noopener noreferrer" href="https://www.antgroup.com">
                Orders
            </a>
        ),
    },
    {
        key: '7',
        icon: <HeartOutlined />,
        label: (
            <a target="_blank" rel="noopener noreferrer" href="https://www.antgroup.com">
                Saved items
            </a>
        ),
    },

];


const AppHeader = () => {
    const { token } = useToken();
    const contentStyle = {
        backgroundColor: token.colorBgElevated,
        borderRadius: token.borderRadiusLG,
        boxShadow: token.boxShadowSecondary,
    };
    const menuStyle = {
        boxShadow: 'none',
    };

    return (
        <div style={{ position: 'sticky', top: 0, zIndex: 1000 }}>
            <nav class="bg-white border-gray-200 dark:bg-gray-900">
                <div class="max-w-screen-xl flex flex-wrap items-center justify-between mx-auto p-4">
                    <a href="https://flowbite.com/" class="flex items-center">
                        <img src="https://flowbite.com/docs/images/logo.svg" class="h-8 mr-3" alt="Flowbite Logo" />
                        <span class="self-center text-2xl font-semibold whitespace-nowrap dark:text-white">Flowbite</span>
                    </a>

                    <form style={{ width: '600px' }} class="flex items-center">
                        <label for="voice-search" class="sr-only">Search</label>
                        <div class="relative w-full">
                            <div class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
                                <svg aria-hidden="true" class="w-5 h-5 text-gray-500 dark:text-gray-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" clip-rule="evenodd"></path></svg>
                            </div>
                            <input type="text" id="voice-search" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full pl-10 p-2.5  dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder="Search Mockups, Logos" required />
                            <button type="button" class="absolute inset-y-0 right-0 flex items-center pr-3">
                                <svg aria-hidden="true" class="w-4 h-4 text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M7 4a3 3 0 016 0v4a3 3 0 11-6 0V4zm4 10.93A7.001 7.001 0 0017 8a1 1 0 10-2 0A5 5 0 015 8a1 1 0 00-2 0 7.001 7.001 0 006 6.93V17H6a1 1 0 100 2h8a1 1 0 100-2h-3v-2.07z" clip-rule="evenodd"></path></svg>
                            </button>
                        </div>
                        <button type="submit" class="inline-flex items-center py-2.5 px-3 ml-2 text-sm font-medium text-white bg-blue-700 rounded-lg border border-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">
                            Search
                        </button>
                    </form>

                    <div class="items-center justify-between hidden w-full md:flex md:w-auto md:order-1">
                        <ul class="flex flex-col p-4 md:p-0 mt-4 font-medium border border-gray-100 rounded-lg bg-gray-50 md:flex-row md:space-x-8 md:mt-0 md:border-0 md:bg-white dark:bg-gray-800 md:dark:bg-gray-900 dark:border-gray-700">
                            <li>
                                <a href='/#'>
                                    <Dropdown
                                        menu={{
                                            items
                                        }}
                                        placement="bottom"
                                        arrow
                                        trigger={['click']}
                                        dropdownRender={(menu) => (
                                            <div style={contentStyle}>
                                                {React.cloneElement(menu, {
                                                    style: menuStyle,
                                                })}
                                                <Divider
                                                    style={{
                                                        margin: 0,
                                                    }}
                                                />
                                                <Space
                                                    style={{
                                                        padding: 8,
                                                    }}
                                                >
                                                    <Button type="primary">Login</Button>
                                                </Space>
                                            </div>
                                        )}
                                    >
                                        <a onClick={(e) => e.preventDefault()} href='/#'>
                                            <Button size='large' type='text'>
                                                <Space>
                                                    <UserOutlined style={{ fontSize: '24px' }} />
                                                    Account
                                                    <svg class="w-4 h-4 ml-2" aria-hidden="true" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg>
                                                </Space>
                                            </Button>
                                        </a>
                                    </Dropdown>
                                </a>
                            </li>
                            <li>
                                <Dropdown
                                    menu={{
                                        items: menuItems, // 此处已修复
                                    }}
                                    placement="bottom"
                                    arrow
                                    trigger={['click']}
                                >
                                    <Button type="text" size='large'>
                                        <Space>
                                            <QuestionCircleOutlined style={{ fontSize: '24px' }} />
                                            Help
                                            <svg class="w-4 h-4 ml-2" aria-hidden="true" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg>
                                        </Space>
                                    </Button>
                                </Dropdown>
                            </li>
                            <li style={{ marginTop: '10px' }}>
                                <a href='/#'>
                                    <Space>
                                        <ShoppingCartOutlined style={{ fontSize: '24px' }} />Cart
                                    </Space>
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>
            </nav>
        </div>
    );
};
export default AppHeader;

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