解决React报错React.Children.only expected to receive single React element child
目录
- 总览
- React片段
- DOM元素
总览
当我们把多个子元素传递给一个只期望有一个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的消费者在使用该组件时只提供一个子元素。
以上就是解决React报错React.Children.only expected to receive single React element child的详细内容，更多关于React报错single element child的资料请关注我们其它相关文章！
相关推荐
-
ReactJS 应用兼容ios9对标ie11解决方案
目录 背景 遇到问题 解决方案 初始配置 安装@babel/preset-env 安装 @babel/plugin-proposal-decorators 和 @babel/plugin-proposal-class-properties 安装promise 结语 背景 最近遇到了一个比较棘手的问题,客户要求我们的react应用在ios9上运行,我们的应用在ios9上是白屏显示,所以需要做一些兼容. 遇到问题 遇到问题之后有一个更大的问题就是手上没有ios9的机器,毕竟这个太他娘的古老了,我就去
-
react后台系统最佳实践示例详解
目录 一.中后台系统的技术栈选型 1. 要做什么 2. 要求 3. 技术栈怎么选 二.hooks时代状态管理库的选型 context redux recoil zustand MobX 三.hooks的使用问题与解决方案 总结 一.中后台系统的技术栈选型 本文主要讲三块内容:中后台系统的技术栈选型.hooks时代状态管理库的选型以及hooks的使用问题与解决方案. 1. 要做什么 我们的目标是搭建一个适用于公司内部中后台系统的前端项目最佳实践. 2. 要求 由于业务需求比较多,一名开发人员需要负
-
React错误的习惯用法分析详解
目录 过多的声明state 问题 解决方法 不必要的state 问题 解决方法 过多的useEffect 问题 解决方法 请求竞争问题 问题 解决方法 使用三元表达式代替&& 使用 && 常见的错误 解决方法 传递特殊属性ref 问题 解决方法 过多的声明state 在我们React的日常开发中一些常用的写法,看似运行的很好,实际可能并不优雅.学习React并不是如何如何使用它,而是如何写出优雅,干净的代码.下面举一些例子,总结了一些React开发中不好的写法及相应更好的写
-
React Hooks使用startTransition与useTransition教程示例
目录 引言 需求分析 startTransition使用 useTransition 总结 引言 今天带来的是react18版本推出的全新hooks:useTransition,它的使用范围主要是用于性能优化,今天我们一探究竟吧. 需求分析 假设现在有如下需求:当用户在输入框查询数据时,需要实时根据用户输入数据进行搜索提示项的展示.与以往不同的是,提示列表的个数是十分庞大的,每次都在10000条以上. 设计过程 import {useState} from "react"; impor
-
react-router-domV6嵌套路由实现详解
目录 V6新特性 <Route>的属性变更component/render->element <Link/>使用变动 <Redirect/> 替换为 <Navigate/> <Switch/> 重命名为 <Routes/> 用useNavigate代替useHistory 依赖包大小从20kb减少到8kb,整体体积减少 新钩子useRoutes代替react-router-config 新标签:<Outlet/> V
-
解决React报错React.Children.only expected to receive single React element child
目录 总览 React片段 DOM元素 总览 当我们把多个子元素传递给一个只期望有一个React子元素的组件时,会产生"React.Children.only expected to receive single React element child"错误.为了解决该错误,将所有元素包装在一个React片段或一个封闭div中. 这里有个示例来展示错误是如何发生的. // App.js import React from 'react'; function Button(props)
-
解决React报错Expected an assignment or function call and instead saw an expression
目录 正文 显式返回 隐式返回 返回对象 正文 当我们忘记从函数中返回值时,会产生"Expected an assignment or function call and instead saw an expression"错误.为了解决该错误,确保显式地使用return语句或使用箭头函数隐式返回. 下面有两个示例来展示错误是如何产生的. // App.js const App = props => { const result = ['a', 'b', 'c'].map(el
-
React报错信息之Expected an assignment or function call and instead saw an expression
目录 正文从这开始~ 总览 显式返回 隐式返回 返回对象 正文从这开始~ 总览 当我们忘记从函数中返回值时,会产生"Expected an assignment or function call and instead saw an expression"错误.为了解决该错误,确保显式地使用return语句或使用箭头函数隐式返回. 下面有两个示例来展示错误是如何产生的. // App.js const App = props => { const result = ['a', '
-
解决React报错Functions are not valid as a React child
目录 总览 调用函数 总结 总览 产生"Functions are not valid as a React child. This may happen if you return a Component instead of <Component /> from render."错误 通常是因为以下两个原因: 从render中返回一个函数引用而不是一个组件. 使用 react router 路由作为<Route path="/about" el
-
解决React报错Parameter 'props' implicitly has an 'any' type
目录 总览 安装类型文件 声明类型 泛型 重新安装 总览 当我们没有为函数组件或者类组件的props声明类型,或忘记为React安装类型声明文件时,会产生"Parameter 'props' implicitly has an 'any' type"错误.为了解决这个错误,在你的组件中明确地为props对象设置一个类型. 安装类型文件 你首先要确定的是你已经安装了React类型声明文件.在项目的根目录下打开终端,并运行以下命令. # ️ with NPM npm install --s
-
React报错之Object is possibly null的问题及解决方法
目录 类型守卫 非空断言 总结 类型守卫 使用类型守卫来解决React中useRef钩子“Object is possibly null”的错误.比如说,if (inputRef.current) {} .一旦null被排除在ref的类型之外,我们就能够访问ref上的属性. 下面是一个错误如何发生的示例. import {useEffect, useRef} from 'react'; export default function App() { const inputRef = useRef
-
React报错之组件不能作为JSX组件使用的解决方法
目录 总览 返回单个JSX元素 不要忘记返回值 更新React类型声明 总览 组件不能作为JSX组件使用,出现该错误有多个原因: 返回JSX元素数组,而不是单个元素. 从组件中返回JSX元素或者null以外的任何值. 使用过时的React类型声明. 返回单个JSX元素 下面是一个错误如何发生的示例. // App.tsx // ️ 'App' cannot be used as a JSX component. // Its return type 'Element[]' is not a va
-
React报错解决之ref返回undefined或null
目录 总览 useEffect 事件 总结 总览 当我们试图在其对应的DOM元素被渲染之前访问其current属性时,React的ref通常会返回undefined或者null.为了解决该问题,可以在useEffect钩子中访问ref,或者当事件触发时再访问ref. import {useRef, useEffect} from 'react'; export default function App() { const ref = useRef(); console.log(ref.curre
-
React报错之Parameter event implicitly has an any type解决
目录 引言 总览 设置类型 逃生舱any 确定类型 引言 原文链接:bobbyhadz.com/blog/react-… 作者:Borislav Hadzhiev 正文从这开始~ 总览 当我们不在事件处理函数中为事件声明类型时,会产生"Parameter 'event' implicitly has an 'any' type"错误.为了解决该错误,显示地为event参数声明类型. 比如说,在input元素上,将处理change事件声明类型为React.ChangeEvent<H
-
解决React报错useNavigate() may be used only in context of Router
目录 总览 useNavigate Jest replace 总览 当我们尝试在react router的Router上下文外部使用useNavigate 钩子时,会产生"useNavigate() may be used only in the context of a Router component"警告.为了解决该问题,只在Router上下文中使用useNavigate 钩子. 下面是一个在index.js文件中将React应用包裹到Router中的例子. // index.j