嘿，我遇到了这个错误，但我不知道它到底来自哪里。我有一个带有两个下拉菜单的导航栏，我想渲染不同的菜单项。
当我单击第一个下拉菜单时，它工作正常，但第二个下拉菜单则不然，相反，我在屏幕上收到此错误，但在控制台中没有警告
React.Children.only expected to receive a single React element child.我尝试将元素包装在
<React.Fragment></React.Fragment/>这是我的组件
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={{
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;
"antd": "^5.6.1",在Ant Design 的下拉菜单中，
items is an API you should pass to it your listmenu={{ items }}menu={{ items: items }}menuItemsmenu={{ items: menuItems }}更改：
<Dropdown
menu={{ menuItems }}
placement="bottom"
arrow
trigger={['click']}
>
致：
<Dropdown
menu={{ items: menuItems }}
placement="bottom"
arrow
trigger={['click']}
>