日本免费高清视频-国产福利视频导航-黄色在线播放国产-天天操天天操天天操天天操|www.shdianci.com

學(xué)無先后，達(dá)者為師

網(wǎng)站首頁 編程語言 正文

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

作者：chuck ? 更新時(shí)間： 2023-02-14 編程語言

總覽

當(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è)示例來展示錯(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片段來解決該錯(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ì)的片段語法。

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)行分組，而沒有向DOM中添加額外的節(jié)點(diǎn)。

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

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ù)來驗(yàn)證children屬性是否只有一個(gè)子元素，并返回它。否則該方法會(huì)拋出一個(gè)錯(cuò)誤。

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

原文鏈接：https://juejin.cn/post/7179606722162950199

欄目分類
最近更新