脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → 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通过组件拆分实现购物车界面详解

    react通过组件拆分实现购物车界面详解

    这篇文章主要介绍了react通过组件拆分来实现购物车页面的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2022-08-08
  • react分页显示数据的方法

    react分页显示数据的方法

    分页在很多地方都可以用到，本文主要实现了react分页显示，主要使用三个组件，父组件listBox、列表组件List、按钮组件PageButton，感兴趣的可以了解一下
    2021-08-08
  • React 中使用 react-i18next 国际化的过程(react-i18next 的基本用法)

    React 中使用 react-i18next 国际化的过程(react-i18next 的基本用法)

    i18next 是一款强大的国际化框架，react-i18next 是基于 i18next 适用于 React 的框架，本文介绍了 react-i18next 的基本用法，如果更特殊的需求，文章开头的官方地址可以找到答案
    2023-01-01
  • React Router 中实现嵌套路由和动态路由的示例

    React Router 中实现嵌套路由和动态路由的示例

    React Router 是一个非常强大和灵活的路由库，它为 React 应用程序提供了丰富的导航和 URL 管理功能，能够帮助我们构建复杂的单页应用和多页应用，这篇文章主要介绍了React Router 中如何实现嵌套路由和动态路由,需要的朋友可以参考下
    2023-05-05
  • React系列useSyncExternalStore学习详解

    React系列useSyncExternalStore学习详解

    这篇文章主要为大家介绍了React系列useSyncExternalStore的学习及示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2022-07-07
  • React 实现具备吸顶和吸底功能组件实例

    React 实现具备吸顶和吸底功能组件实例

    这篇文章主要为大家介绍了React 实现具备吸顶和吸底功能组件实例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2023-02-02
  • React Streaming SSR原理示例深入解析

    React Streaming SSR原理示例深入解析

    这篇文章主要为大家介绍了React Streaming SSR原理示例深入解析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2022-12-12
  • React 模式之纯组件使用示例详解

    React 模式之纯组件使用示例详解

    这篇文章主要为大家介绍了React 模式之纯组件使用示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2022-08-08
  • React 18中的state概念与使用、注意问题解决

    React 18中的state概念与使用、注意问题解决

    state和props类似，都是一种存储属性的方式，但是不同点在于state只属于当前组件，其他组件无法访问，这篇文章主要介绍了React 18中的state概念与使用、注意问题，需要的朋友可以参考下
    2022-12-12
  • 搭建React Native热更新平台的详细过程

    搭建React Native热更新平台的详细过程

    这篇文章主要介绍了搭建React Native热更新平台,要实现 React Native 热更新功能，有四种思路 Code Push、Pushy、Expo 和自研，感兴趣的朋友一起通过本文学习吧
    2022-05-05

最新评论