问题描述

当使用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啦！