526互联

React AntD的Dropdown组件报错：React.Children.only expected to receive a single React element child.可能的n原因

发布时间 2023-11-17 10:57:17作者: FacingScreen

React.Children.only expected to receive a single React element child.

Error: React.Children.only expected to receive a single React element child.
    at Object.onlyChild [as only] (http://127.0.0.1:5173/node_modules/.vite/deps/chunk-AWAXCICB.js?v=d48d4aee:803:21)
    at Dropdown2 (http://127.0.0.1:5173/node_modules/.vite/deps/antd.js?v=d48d4aee:29936:35)
······
这个报错很明显，提示我们React Children.只应接收单个React元素的子项，然后我们去检查，代码，是单一子元素啊，em...

下面总结原因：

1、不换行报错（最离谱）

错误代码：

<Dropdown menu={ {items:headerMenus} }><span>user</span> </Dropdown>

 改成如下错误消失：

                <Dropdown menu={{ items: headerMenus }}>
                    <span>user</span>
                </Dropdown>

 2、子元素确实不是唯一的

比如：

        <Dropdown menu={{ items: headerMenus }}>
                    <span>user</span>
                    <span>user</span>
         </Dropdown>

3、menu属性传递的值不是一个带有items属性的对象

这就属于看antd的文档不仔细了，但是这个报错提示确实可谓谬以千里了。。。