React Antd Dropdown动态菜单报错：React.Children.only期望单个子元素

问题根源是你第二个Dropdown的menu配置语法错误：
你写的menu={{ items2 }}是ES6对象简写，实际等价于menu={{ items2: items2 }}，但Ant Design Dropdown要求menu对象必须通过items这个key来传入菜单项数组，组件无法识别items2这个自定义键名，导致菜单没有正确渲染，点击时触发了React.Children.only的错误。

修复代码 #

把第二个Dropdown的menu配置改成menu={{ items: items2 }}即可：

var items = [
    {
      key: '0',
      label:  'item0',
    },
    {
      key: '1',
      label:  'item1',
    }
  ];
  
var items2 = []
for (let item of items) items2.push({key: items2.length.toString(), label: item.label})

console.log(items, items2, JSON.stringify(items), JSON.stringify(items2), JSON.stringify(items) === JSON.stringify(items2) )

return (<>
  <Dropdown menu={{ items }} trigger={['click']}>
    <a onClick={(e) => e.preventDefault()}>
      {name} <DownOutlined />
    </a>
  </Dropdown>
  {/* 修正menu配置的键名 */}
  <Dropdown menu={{ items: items2 }} trigger={['click']}>
    <a onClick={(e) => e.preventDefault()}>
      {name} <DownOutlined />
    </a>
  </Dropdown>
</>)

验证逻辑 #

虽然items和items2的内容完全一致，但组件只认menu.items这个固定结构，之前的写法相当于给menu传了一个无效键，组件无法解析出菜单项，自然会抛出子元素异常的错误。修复后组件能正确读取菜单项数组，即可正常工作。

内容的提问来源于stack exchange，提问作者Nicolas Bernard