react使用antd中的＜Dropdown/＞组件报错：`React.Children.only expected to receive a single React element child.`

最新推荐文章于 2025-02-20 14:37:28 发布

vivisol

最新推荐文章于 2025-02-20 14:37:28 发布

阅读量3.1k

点赞数 22

文章标签：前端 react ant design antd javascript

本文链接：https://blog.csdn.net/vivisol/article/details/135751975

版权

本文讲述了在使用AntDesign的Dropdown组件时遇到的报错，原因是menuProps的items属性定义错误。作者指出正确的方式是明确指定items属性并将其值赋给items键，而非直接使用items作为属性名。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

问题描述

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