React报错之React.Children.only expected to receive single React element child
2023-02-18 16:40:34 时间
总览
当我们把多个子元素传递给一个只期望有一个React子元素的组件时,会产生"React.Children.only expected to receive single React element child"错误。为了解决该错误,将所有元素包装在一个React片段或一个封闭div
中。
这里有个示例来展示错误是如何发生的。
// 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的消费者在使用该组件时只提供一个子元素。
相关文章
- 【愚公系列】2022年12月 .NET CORE工具案例-PLG轻量级日志可视化服务
- [NetWork] TCP/UDP 基本原理
- 分分钟完成Redis集群改造升级
- [NetWork] IP基础原理
- 【SCT】Spring Cloud Tencent Commons
- nature genetics图表复现-自定义绘制散点图
- 二进制安装Kubernetes(k8s) v1.25.0 IPv4/IPv6双栈
- 安装Minikube并启动一个Kubernetes环境
- 二进制安装Kubernetes(k8s) v1.26.0 IPv4/IPv6双栈
- 最长上升子序列
- 合唱队形
- 导弹拦截
- 动态规划理论
- 三角函数
- 迷宫3---BFS
- 迷宫2----BFS
- DFS与DFS迷宫问题
- 马走日
- 求先序序列
- 信息传递