解決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中。

這里有個示例來展示錯誤是如何發(fā)生的。

// 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>
  );
}

當我們需要對子節(jié)點列表進行分組，而不需要向DOM添加額外的節(jié)點時，就會使用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中添加額外的節(jié)點。

現(xiàn)在大多數代碼編輯器都支持更簡明的語法，因此更常用。

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>
  );
}

這樣就解決了錯誤，因為我們現(xiàn)在向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的資料請關注腳本之家其它相關文章！

您可能感興趣的文章: