antd Dropdown组件使用时报错：React.Children.only expected to receive a single React element child

报错信息：

Uncaught Error: React.Children.only expected to receive a single React element child.

antd版本为：4.10.0

问题描述：

当我在项目里使用 antd的Dropdown组件时出现的问题，我使用官网的例子，页面可以正常渲染，但当我鼠标放到Dropdown 上就页面崩溃，报了这个错。

这个错的意思是Children.only只期望接收一个React元素子元素，从开发者工具看是 antd内部的错误。
代码如下（其他例子我也试了同样报错）：

const items = [
  { label: '菜单项一', key: 'item-1' }, // 菜单项务必填写 key
  { label: '菜单项二', key: 'item-2' },
];
return (
  <Dropdown menu={{ items }}>
    <a>Hover me</a>
  </Dropdown>
);

解决方案：

我仔细看了文档发现是我antd版本的问题：

// >=4.24.0 可用，推荐的写法 ✅
const items = [
  { label: '菜单项一', key: 'item-1' }, // 菜单项务必填写 key
  { label: '菜单项二', key: 'item-2' },
];
return (
  <Dropdown menu={{ items }}>
    <a>Hover me</a>
  </Dropdown>
);

// <4.24.0 可用，>=4.24.0 时不推荐 🙅🏻‍♀️
const menu = (
  <Menu>
    <Menu.Item>菜单项一</Menu.Item>
    <Menu.Item>菜单项二</Menu.Item>
  </Menu>
);
return (
  <Dropdown overlay={menu}>
    <a>Hover me</a>
  </Dropdown>
);

antd 官网Dropdown 4.24.0用法升级

我的版本是 4.10.0，应该用下面这种写法！！！

所以解决方案就是根据你自己的antd版本选择合适的写法！

补充说明Dropdown里的children必须有个根元素：

后来我发现下面这种写法也会报相同的错：

 const menu: any = (
        <Menu>
            <Menu.Item>菜单项一</Menu.Item>
            <Menu.Item>菜单项二</Menu.Item>
        </Menu>
    );
<Dropdown overlay={menu}>
     更多
 </Dropdown>

必须在 Dropdown里加个根元素:

<Dropdown overlay={menu}>
     <span>
     更多
     </span>
 </Dropdown>

这样就好了！