解决React报错React.Children.only expected to receive single React element child

2024-08-17 18:11:55

总览

当我们把多个子元素传递给一个只期望有一个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的资料请关注我们其它相关文章！

react-router-domV6嵌套路由实现详解

目录 V6新特性 <Route>的属性变更component/render->element <Link/>使用变动 <Redirect/> 替换为 <Navigate/> <Switch/> 重命名为 <Routes/> 用useNavigate代替useHistory 依赖包大小从20kb减少到8kb,整体体积减少新钩子useRoutes代替react-router-config 新标签:<Outlet/> V
React Hooks使用startTransition与useTransition教程示例

目录引言需求分析 startTransition使用 useTransition 总结引言今天带来的是react18版本推出的全新hooks:useTransition,它的使用范围主要是用于性能优化,今天我们一探究竟吧. 需求分析假设现在有如下需求:当用户在输入框查询数据时,需要实时根据用户输入数据进行搜索提示项的展示.与以往不同的是,提示列表的个数是十分庞大的,每次都在10000条以上. 设计过程 import {useState} from "react"; impor
React错误的习惯用法分析详解

目录过多的声明state 问题解决方法不必要的state 问题解决方法过多的useEffect 问题解决方法请求竞争问题问题解决方法使用三元表达式代替&& 使用 && 常见的错误解决方法传递特殊属性ref 问题解决方法过多的声明state 在我们React的日常开发中一些常用的写法,看似运行的很好,实际可能并不优雅.学习React并不是如何如何使用它,而是如何写出优雅,干净的代码.下面举一些例子,总结了一些React开发中不好的写法及相应更好的写
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报错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

解决React报错React.Children.only expected to receive single React element child

目录

总览

React片段

DOM元素

相关推荐

随机推荐