问题描述
当使用antd中的<Dropdown/>
组件时,报错:React.Children.only expected to receive a single React element child.
原因分析
<Dropdown/>
组件中的menu
参数传入的menuProps格式定义错误导致。
先来看antd官方的例程:
const handleMenuClick = (e) => {
message.info('Click on menu item.');
console.log('click', e);
};
const items = [
{
label: '1st menu item',
key: '1',
icon: <UserOutlined />,
},
{
label: '2nd menu item',
key: '2',
icon: <UserOutlined />,
},
{
label: '3rd menu item',
key: '3',
icon: <UserOutlined />,
danger: true,
},
{
label: '4rd menu item',
key: '4',
icon: <UserOutlined />,
danger: true,
disabled: true,
},
];
const menuProps = {
items,
onClick: handleMenuClick,
};
我参照官方的写法:
const handleMenuClick = (e) => {
message.info('Click on menu item.');
console.log('click', e);
};
const levelItems = [
{
label: '困难',
key: '1',
},
{
label: '普通',
key: '2',
},
{
label: '简单',
key: '3',
}
]
const levelMenuProps = {
levelItems,
onClick: handleMenuClick,
};
//中间代码省略
return (
<>
<Dropdown menu={levelMenuProps}>
<Button>
<Space>
难度
<DownOutlined/>
</Space>
</Button>
</Dropdown>
</>
);
官方程序里:
const menuProps = {
items,
onClick: handleMenuClick,
};
这里采用了一种简化的写法,是指属性items
的值也是items
,而我虽然看起来用同样的形式来定义,可是其实是不存在除了items
之外的属性去接受items
值的。
正确的做法,应该是将items属性名写全:
const levelMenuProps = {
items:levelItems,
onClick: handleMenuClick,
};
就ok啦!