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

背景：

React 项目使用Ant Design + Storybook时发报：

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

问题点：

异常代码：

<Dropdown overlay={menu}>
    <Rate allowHalf defaultValue={4.5} disabled/>
    <span>4.8</span>
    <Icon type="down" style={{fontSize: 18}}/>
</Dropdown>

Ant Design中<Dropdown></Dropdown> 组件内部最外层只能接受一个元素，而代码中有三个元素，所以报错。

解决方案：

将三个元素用<div></div>包裹后OK，不再报错，页面可正常显示。

正确代码：

<Dropdown overlay={menu}>
    <div>
        <Rate allowHalf defaultValue={4.5} disabled/>
        <span>4.8</span>
        <Icon type="down" style={{fontSize: 18}}/>
    </div>
</Dropdown>

【React】React.Children.only expected to receive a single React element child相关推荐

【Scala】scala ':' or newline expected \u200b
1. 背景拷贝了网上一段代码,发现报错如下这个是因为不可见字符,引起的,全局替换一下就好了. 参考:[IDEA]IDEA报错 illegal character U+00A0异常解决
【Vue】 vue-Router children 子组件空白显示，没有内容
场景: 打算访问 /parent/child1 和 /parent/child2 ,但产生问题是:子页面一直空白显示 # route.js 产生问题示例 {path: '/parent',childr ...
【2021-12-22】【Kotlin】Type inference failed. Expected type mismatch: inferred type is HashSet but Set
类似这样的错误提示: Type inference failed. Expected type mismatch: Inferred type is HashSet<String>? bu ...
【HDU】4706 Children's Day（模拟）
http://acm.hdu.edu.cn/showproblem.php?pid=4706 该题没有输入,直接输出不同形状大小的N,在输出不同形状N的时候是要用到26个字母,并且是循环输出 #inc ...
【菜鸟】java.net.URISyntaxException: Expected scheme-specific part at index 10: localhost: 报错解决思路
检查链接是否有http://前缀
【实践】多径效应CIR估计
这周最紧要任务,写多径效应的CIR估计,故将思路历程收集于一个 blog 中,以供今后参考文章目录 1 题目解读 2 信道估计初探 Reference 1 题目解读首先这个任务题目就看不懂,啥叫 ...
【D1N910】一线大厂React实践宝典（二） React组件
目录 React 组件 [资料]组件化开发的演变创建 React 组件 SOLID 原则(基本上都是源自资料) 组件的数据流组件的生命周期高阶组件 [资料]装饰者模式正常操作,正常分析,大家好 ...
【D1N910】一线大厂React实践宝典（二）课程引言+React开发环境
目录课程引言 React基本开发环境搭建工程化React开发环境开始你的 React 之旅 JSX 语法混合 JavaScript 与 JSX 正常操作,正常分析,大家好,我是D1N910. ...
【尚硅谷React】——React全家桶笔记
文章目录第1章 React简介 1.1 React的特点 1.2 引入文件 1.3 JSX 1.3.1 为什么要用JSX 1.3.2 JSX语法规则 1.4 虚拟DOM 1.5 模块与组件 1.5. ...

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

背景：

问题点：

解决方案：

【React】React.Children.only expected to receive a single React element child相关推荐

最新文章

热门文章