脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → React → React报错single  element child

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

 更新时间：2023年01月05日 14:53:07   作者：chuck  
这篇文章主要为大家介绍了React报错React.Children.only expected to receive single React element child分析解决，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪

总览

当我们把多个子元素传递给一个只期望有一个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 useRef原理

    重新理解 React useRef原理

    这篇文章主要为大家介绍了React useRef原理的深入理解分析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2023-05-05
  • React中常见的动画实现的几种方式

    React中常见的动画实现的几种方式

    本篇文章主要介绍了React中常见的动画实现的几种方式，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-01-01
  • React中获取数据的3种方法及优缺点

    React中获取数据的3种方法及优缺点

    这篇文章主要介绍了React中获取数据的3种方法及优缺点，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2020-02-02
  • react如何用懒加载减少首屏加载时间

    react如何用懒加载减少首屏加载时间

    这篇文章主要介绍了react如何利用懒加载减少首屏加载时间，帮助大家更好的理解和学习使用react，感兴趣的朋友可以了解下
    2021-04-04
  • React组件通信实现流程详解

    React组件通信实现流程详解

    这篇文章主要介绍了React组件通信,在开发中组件通信是React中的一个重要的知识点，本文通过实例代码给大家讲解react中常用的父子、跨组件通信的方法，需要的朋友可以参考下
    2022-12-12
  • react中如何使用监听

    react中如何使用监听

    在 React 中,您可以使用 addEventListener 函数来监听事件,本文通过实例代码给大家介绍react中如何使用监听,感兴趣的朋友跟随小编一起看看吧
    2023-10-10
  • ios原生和react-native各种交互的示例代码

    ios原生和react-native各种交互的示例代码

    本篇文章主要介绍了ios原生和react-native各种交互的示例代码，非常具有实用价值，需要的朋友可以参考下
    2017-08-08
  • react中Suspense的使用详解

    react中Suspense的使用详解

    这篇文章主要介绍了react中Suspense的使用详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2019-09-09
  • React合成事件原理解析

    React合成事件原理解析

    事件是在编程时系统内发生的动作或者发生的事情，而开发者可以某种方式对事件做出回应，而这里有几个先决条件，这篇文章主要介绍了React合成事件原理解析,需要的朋友可以参考下
    2022-07-07
  • React高阶组件使用详细介绍

    React高阶组件使用详细介绍

    高阶组件就是接受一个组件作为参数并返回一个新组件（功能增强的组件）的函数。这里需要注意高阶组件是一个函数，并不是组件，这一点一定要注意，本文给大家分享React高阶组件使用小结，一起看看吧
    2023-01-01

最新评论