使用AntD Dropdown结合Space组件时触发React压缩错误#143求助

错误原因定位 #

你遇到的React.Children.only expected to receive a single React element child错误（压缩后为#143），并非来自最外层的Space组件——你的外层Space包含两个子元素是符合组件规范的。

真正的问题出在你自定义的menu函数上：AntD的Dropdown组件要求menu属性必须接收单个React元素（通常是Menu组件），如果你的menu函数直接返回多个Menu.Item或未包裹在单个父元素内的零散元素，就会触发这个报错。

解决方案 #

修改menu函数，确保它返回的是完整的Menu组件，所有菜单项都嵌套在Menu内部。

修正后的示例代码 #

// 正确的menu函数写法
const menu = (data, handleClick) => {
  return (
    <Menu>
      {data.map(item => (
        <Menu.Item 
          key={item.id} // 确保每个菜单项key唯一
          onClick={() => handleClick(item)}
        >
          {item.name}
        </Menu.Item>
      ))}
    </Menu>
  );
};

额外排查点 #

如果确认menu函数写法正确，可再检查以下内容：

• 确保Dropdown的触发子元素（你的代码中是Button）是单个React元素
• 检查Button内部的Space组件是否存在语法错误（比如未闭合标签、多余的无效节点）

内容的提问来源于stack exchange，提问作者Ranjan Kumar