快捷導(dǎo)航

解決React報(bào)錯(cuò)React.Children.only expected to receive single React element child

更新時(shí)間：2023年01月05日 14:53:07 作者：chuck

這篇文章主要為大家介紹了React報(bào)錯(cuò)React.Children.only expected to receive single React element child分析解決，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

總覽

當(dāng)我們把多個(gè)子元素傳遞給一個(gè)只期望有一個(gè)React子元素的組件時(shí)，會(huì)產(chǎn)生"React.Children.only expected to receive single React element child"錯(cuò)誤。為了解決該錯(cuò)誤，將所有元素包裝在一個(gè)React片段或一個(gè)封閉div中。

這里有個(gè)示例來(lái)展示錯(cuò)誤是如何發(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元素期望傳遞單個(gè)子元素，但我們?cè)谕?jí)下傳遞了2個(gè)子元素。

React片段

我們可以使用React片段來(lái)解決該錯(cuò)誤。

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

當(dāng)我們需要對(duì)子節(jié)點(diǎn)列表進(jìn)行分組，而不需要向DOM添加額外的節(jié)點(diǎn)時(shí)，就會(huì)使用Fragments。

你可能還會(huì)看到使用了更詳細(xì)的片段語(yǔ)法。

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

上面的兩個(gè)例子達(dá)到了相同的結(jié)果--它們對(duì)子元素列表進(jìn)行分組，而沒(méi)有向DOM中添加額外的節(jié)點(diǎn)。

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

DOM元素

另一個(gè)解決方案是將子元素包裹在另一個(gè)DOM元素中，例如一個(gè)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>
  );
}

這樣就解決了錯(cuò)誤，因?yàn)槲覀儸F(xiàn)在向Button組件傳遞了單一的子元素。

這種方法只有在添加一個(gè)額外的div而不會(huì)破壞你的布局時(shí)才有效，否則就使用一個(gè)片段，因?yàn)槠尾粫?huì)向DOM添加任何額外的標(biāo)記。

這是很有必要的，因?yàn)?code>Button組件使用React.Children.only函數(shù)來(lái)驗(yàn)證children屬性是否只有一個(gè)子元素，并返回它。否則該方法會(huì)拋出一個(gè)錯(cuò)誤。

React.Children.only方法經(jīng)常被用于第三方庫(kù)，以確保API的消費(fèi)者在使用該組件時(shí)只提供一個(gè)子元素。

以上就是解決React報(bào)錯(cuò)React.Children.only expected to receive single React element child的詳細(xì)內(nèi)容，更多關(guān)于React報(bào)錯(cuò)single element child的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: