解決React報錯React.Children.only expected to receive single React element child
總覽
當我們把多個子元素傳遞給一個只期望有一個React子元素的組件時，會產(chǎn)生"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)在大多數(shù)代碼編輯器都支持更簡明的語法，因此更常用。
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函數(shù)來驗證children屬性是否只有一個子元素，并返回它。否則該方法會拋出一個錯誤。
React.Children.only方法經(jīng)常被用于第三方庫，以確保API的消費者在使用該組件時只提供一個子元素。
以上就是解決React報錯React.Children.only expected to receive single React element child的詳細內容，更多關于React報錯single element child的資料請關注腳本之家其它相關文章！
相關文章
React項目開發(fā)中函數(shù)組件與函數(shù)式編程關系
函數(shù)組件和函數(shù)式編程究竟是什么關系呢？本文會圍繞這個話題展開講解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-11-11
這篇文章主要介紹了詳解React中Fragment的簡單使用，文中通過示例代碼介紹的非常詳細，對我們學習React有一定的幫助，感興趣的小伙伴們可以參考一下2022-10-10
React?component.forceUpdate()強制重新渲染方式
這篇文章主要介紹了React?component.forceUpdate()強制重新渲染方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
React 作為當下最為流行的前端開發(fā)框架之一，使用它可以快速構建大型 Web 應用，加上其出色的性能表現(xiàn)，使得眾多互聯(lián)網(wǎng)公司對它格外地青睞，這篇文章主要介紹了React運行機制2022-11-11
這篇文章主要介紹了React Umi國際化配置方法,本文給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友參考下吧2024-04-04
這篇文章主要為大家介紹了React DOM-diff節(jié)點源碼解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-02-02
React組件實例三大核心屬性State props Refs詳解
組件實例的三大核心屬性是：State、Props、Refs。類組件中這三大屬性都存在。函數(shù)式組件中訪問不到 this，也就不存在組件實例這種說法，但由于它的特殊性（函數(shù)可以接收參數(shù)），所以存在Props這種屬性2022-12-12
本文主要介紹了react實現(xiàn)組件狀態(tài)緩存的示例代碼，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2023-02-02
React項目中報錯:Parsing error: The keyword &a
ESLint 默認使用的是 ES5 語法,如果你想使用 ES6 或者更新的語法,你需要在 ESLint 的配置文件如：.eslintrc.js等中設置 parserOptions,這篇文章主要介紹了React項目中報錯:Parsing error: The keyword 'import' is reservedeslint的問題及解決方法,需要的朋友可以參考下2023-12-12
React中useEffect原理的代碼簡單實現(xiàn)詳解
React的useEffect鉤子是React函數(shù)組件中處理副作用,本文將通過一個簡單的例子解釋如何用代碼實現(xiàn)useEffect的基本原理,感興趣的小伙伴可以了解下2023-12-12