React报错之React.Children.only expected to receive single React
2023-03-07 09:15:47 时间
总览
当我们把多个子元素传递给一个只期望有一个React子元素的组件时,会产生"React.Children.only expected to receive single React element child"错误。为了解决该错误,将所有元素包装在一个React片段或一个封闭div
中。
react-children-only-expected-receive-single-child.png
这里有个示例来展示错误是如何发生的。
// App.js
import React from 'react';
function Button(props) {
// ?️ expects single child element
return React.Children.only(props.children);
}
export default function App() {
return (
<Button>
<button
onClick={() => {
console.log('Button clicked');
}}
>
Click
</button>
<button
onClick={() => {
console.log('Button clicked');
}}
>
Click
</button>
</Button>
);
}
Button
元素期望传递单个子元素,但我们在同级下传递了2个子元素。
React片段
我们可以使用React片段来解决该错误。
import React from 'react';
function Button(props) {
// ?️ expects single child element
return React.Children.only(props.children);
}
export default function App() {
return (
<Button>
<>
<button
onClick={() => {
console.log('Button clicked');
}}
>
Click
</button>
<button
onClick={() => {
console.log('Button clicked');
}}
>
Click
</button>
</>
</Button>
);
}
当我们需要对子节点列表进行分组,而不需要向DOM添加额外的节点时,就会使用Fragments
。
你可能还会看到使用了更详细的片段语法。
import React from 'react';
function Button(props) {
// ?️ expects single child element
return React.Children.only(props.children);
}
export default function App() {
return (
<Button>
<React.Fragment>
<button
onClick={() => {
console.log('Button clicked');
}}
>
Click
</button>
<button
onClick={() => {
console.log('Button clicked');
}}
>
Click
</button>
</React.Fragment>
</Button>
);
}
上面的两个例子达到了相同的结果--它们对子元素列表进行分组,而没有向DOM中添加额外的节点。
现在大多数代码编辑器都支持更简明的语法,因此更常用。
DOM元素
另一个解决方案是将子元素包裹在另一个DOM元素中,例如一个div
。
import React from 'react';
function Button(props) {
// ?️ expects single child element
return React.Children.only(props.children);
}
export default function App() {
return (
<Button>
<div>
<button
onClick={() => {
console.log('Button clicked');
}}
>
Click
</button>
<button
onClick={() => {
console.log('Button clicked');
}}
>
Click
</button>
</div>
</Button>
);
}
这样就解决了错误,因为我们现在向Button
组件传递了单一的子元素。
这种方法只有在添加一个额外的
div
而不会破坏你的布局时才有效,否则就使用一个片段,因为片段不会向DOM添加任何额外的标记。
这是很有必要的,因为Button
组件使用React.Children.only
函数来验证children
属性是否只有一个子元素,并返回它。否则该方法会抛出一个错误。
React.Children.only
方法经常被用于第三方库,以确保API的消费者在使用该组件时只提供一个子元素。
- 本文译自:https://bobbyhadz.com/blog/react-children-only-expected-to-receive-single-react-element-child
- 作者:Borislav Hadzhiev
相关文章
- 在 Go 里用 CGO?这 7 个问题你要关注!
- 9款优秀的去中心化通讯软件 Matrix 的客户端
- 求职数据分析,项目经验该怎么写
- 在OKR中,我看到了数据驱动业务的未来
- 火山引擎云原生大数据在金融行业的实践
- OpenHarmony富设备移植指南(二)—从postmarketOS获取移植资源
- 《数据成熟度指数》报告:64%的企业领袖认为大多数员工“不懂数据”
- OpenHarmony 小型系统兼容性测试指南
- 肯睿中国(Cloudera):2023年企业数字战略三大趋势预测
- 适用于 Linux 的十大命令行游戏
- GNOME 截图工具的新旧截图方式
- System76 即将推出的 COSMIC 桌面正在酝酿大变化
- 2GB 内存 8GB 存储即可流畅运行,Windows 11 极致精简版系统 Tiny11 发布
- 迎接 ecode:一个即将推出的具有全新图形用户界面框架的现代、轻量级代码编辑器
- loongarch架构介绍(三)—地址翻译
- Go 语言怎么解决编译器错误“err is shadowed during return”?
- 敏捷:可能被开发人员遗忘的部分
- Denodo预测2023年数据管理和分析的未来
- 利用数据推动可持续发展
- 在 Vue3 中实现 React 原生 Hooks(useState、useEffect),深入理解 React Hooks 的