React報(bào)錯(cuò)Type '() => JSX.Element[]' is not assignable to type FunctionComponent
總覽
當(dāng)我們嘗試從函數(shù)組件中返回元素組成的數(shù)組時(shí),會(huì)產(chǎn)生"Type '() => JSX.Element[]' is not assignable to type FunctionComponent"錯(cuò)誤。為了解決該錯(cuò)誤,可以將元素?cái)?shù)組包裹在React片段中。
這里有個(gè)示例用來展示錯(cuò)誤是如何發(fā)生的。
// App.tsx import React from 'react'; // ?? Type '() => JSX.Element[]' is not assignable to type 'FunctionComponent<{}>'. // Type 'Element[]' is missing the following properties // from type 'ReactElement<any, any>': type, props, key ts(2322) const App: React.FunctionComponent = () => { return ['Alice', 'Bob'].map(element => <div key={element}>{element}</div>); }; export default App;
這是完全有效的React.js代碼,因?yàn)槲覀兡軌驈腞eact的函數(shù)組件中返回一個(gè)數(shù)組。然而,FunctionComponent
接口的返回類型是ReactElement
或null
。
這也就意味著,我們可以只返回一個(gè)React元素或者null
值。
React片段
為了解決該類型錯(cuò)誤,我們必須將數(shù)組包裹在React片段(React fragment)中。
// App.tsx import React from 'react'; const App: React.FunctionComponent = () => { return ( <> {['Alice', 'Bob'].map(element => ( <div key={element}>{element}</div> ))} </> ); }; export default App;
當(dāng)我們需要對(duì)一個(gè)元素列表進(jìn)行分組而不向DOM添加額外的節(jié)點(diǎn)時(shí),就會(huì)用到片段。
React.Fragment
你可能還會(huì)看到使用了更加詳細(xì)的片段語法。
// App.tsx import React from 'react'; const App: React.FunctionComponent = () => { return ( <React.Fragment> {['Alice', 'Bob'].map(element => ( <div key={element}>{element}</div> ))} </React.Fragment> ); }; export default App;
上面的兩個(gè)例子達(dá)到了相同的結(jié)果--它們對(duì)元素列表的元素進(jìn)行分組,而沒有給DOM添加額外的節(jié)點(diǎn)。
div
另一個(gè)解決方案是將元素?cái)?shù)組包裹在另一個(gè)DOM元素中,例如一個(gè)div。
// App.tsx import React from 'react'; const App: React.FunctionComponent = () => { return ( <div> {['Alice', 'Bob'].map(element => ( <div key={element}>{element}</div> ))} </div> ); }; export default App;
這仍然符合FunctionComponent
接口中指定的返回類型,因?yàn)槲覀兊慕M件返回的是一個(gè)單一的React元素。
總結(jié)
為了解決"Type '() => JSX.Element[]' is not assignable to type FunctionComponent"錯(cuò)誤,可以使用React片段或者div
將元素?cái)?shù)組進(jìn)行包裹。
以上就是React報(bào)錯(cuò)Type '() => JSX.Element[]' is not assignable to type FunctionComponent的詳細(xì)內(nèi)容,更多關(guān)于React報(bào)錯(cuò)FunctionComponent的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
React項(xiàng)目經(jīng)驗(yàn)總結(jié)及遇到的坑
這篇文章主要介紹了React項(xiàng)目經(jīng)驗(yàn)總結(jié),本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2022-07-07react實(shí)現(xiàn)一個(gè)優(yōu)雅的圖片占位模塊組件詳解
這篇文章主要給大家介紹了關(guān)于react如何實(shí)現(xiàn)一個(gè)還算優(yōu)雅的占位模塊圖片組件的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧。2017-10-10React使用TailwindCSS的實(shí)現(xiàn)示例
TailwindCSS是一個(gè)實(shí)用優(yōu)先的CSS框架,本文主要介紹了React使用TailwindCSS的實(shí)現(xiàn)示例,具有一定的參考價(jià)值,感興趣的可以了解一下2023-12-12react 下拉框內(nèi)容回顯的實(shí)現(xiàn)思路
這篇文章主要介紹了react 下拉框內(nèi)容回顯,實(shí)現(xiàn)思路是通過將下拉框選項(xiàng)的value和label一起存儲(chǔ)到state中, 初始化表單數(shù)據(jù)時(shí)將faqType對(duì)應(yīng)的label查找出來并設(shè)置到Form.Item中,最后修改useEffect,需要的朋友可以參考下2024-05-05聊聊ant?design?charts?獲取后端接口數(shù)據(jù)展示問題
今天在做項(xiàng)目的時(shí)候遇到幾個(gè)讓我很頭疼的問題,一個(gè)是通過后端接口成功訪問并又返回?cái)?shù)據(jù),但拿不到數(shù)據(jù)值。其二是直接修改state中的data,console中數(shù)組發(fā)生變化但任然數(shù)據(jù)未顯示,這篇文章主要介紹了ant?design?charts?獲取后端接口數(shù)據(jù)展示,需要的朋友可以參考下2022-05-05