React.Children.only 预计接收单元素子

作者

React.Children.only 期望接收单个元素的child

React.Children.only expected to receive single React element child

错误“React.Children.only expected to receive single React element child”发生在我们将多个子元素传递给一个只需要一个 React 元素子元素的组件时。

要解决错误，请将元素包装在 React 片段或封闭的
div.

react children only expected 接收单身儿童

下面是错误如何发生的示例。

应用程序.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 片段来解决错误。

应用程序.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>
  );
}


当我们需要在不向 DOM 添加额外节点的情况下对子列表进行分组时，会使用片段
。

您可能还会看到使用了更冗长的片段语法。

应用程序.js
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.

应用程序.js
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
函数来验证childrenprop 只有一个孩子并返回它。否则，该方法会抛出错误。

该React.Children.only方法常用于第三方库中，以确保 API 的消费者在使用组件时仅提供单个子元素。

结论

要解决错误“React.Children.only expected to receive single React element child”，您要么必须提供单个元素作为组件的子属性，要么用 React 片段包装多个元素。