欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

React報(bào)錯(cuò)Type '() => JSX.Element[]' is not assignable to type FunctionComponent

 更新時(shí)間:2022年12月19日 11:34:17   作者:chuck  
這篇文章主要為大家介紹了React報(bào)錯(cuò)Type '() => JSX.Element[]' is not assignable to type FunctionComponent解決,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪

總覽

當(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接口的返回類型是ReactElementnull。

這也就意味著,我們可以只返回一個(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 '() =&gt; 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é)及遇到的坑

    這篇文章主要介紹了React項(xiàng)目經(jīng)驗(yàn)總結(jié),本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
    2022-07-07
  • React傳值 組件傳值 之間的關(guān)系詳解

    React傳值 組件傳值 之間的關(guān)系詳解

    這篇文章主要介紹了React傳值 組件傳值 之間的關(guān)系詳解,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
    2019-08-08
  • react中useRef的應(yīng)用使用詳解

    react中useRef的應(yīng)用使用詳解

    這篇文章主要介紹了react中useRef的應(yīng)用使用詳解的相關(guān)資料,需要的朋友可以參考下
    2023-05-05
  • 淺談React Component生命周期函數(shù)

    淺談React Component生命周期函數(shù)

    React組件有哪些生命周期函數(shù)?類組件才有的生命周期函數(shù),分為幾個(gè)階段:掛載,更新,卸載,錯(cuò)誤處理,本文主要介紹了這個(gè)階段,感興趣的可以了解一下
    2021-06-06
  • 基于React封裝一個(gè)層次模糊效果的容器組件

    基于React封裝一個(gè)層次模糊效果的容器組件

    這篇文章主要為大家詳細(xì)介紹了如何基于React封裝一個(gè)層次模糊效果的容器組件,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下
    2024-03-03
  • react實(shí)現(xiàn)一個(gè)優(yōu)雅的圖片占位模塊組件詳解

    react實(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-10
  • 詳解如何使用Jest測(cè)試React組件

    詳解如何使用Jest測(cè)試React組件

    在本文中,我們將了解如何使用Jest(Facebook 維護(hù)的一個(gè)測(cè)試框架)來測(cè)試我們的React組件,我們將首先了解如何在純 JavaScript 函數(shù)上使用 Jest,然后再了解它提供的一些開箱即用的功能,這些功能專門用于使測(cè)試 React 應(yīng)用程序變得更容易,需要的朋友可以參考下
    2023-10-10
  • React使用TailwindCSS的實(shí)現(xiàn)示例

    React使用TailwindCSS的實(shí)現(xiàn)示例

    TailwindCSS是一個(gè)實(shí)用優(yōu)先的CSS框架,本文主要介紹了React使用TailwindCSS的實(shí)現(xiàn)示例,具有一定的參考價(jià)值,感興趣的可以了解一下
    2023-12-12
  • react 下拉框內(nèi)容回顯的實(shí)現(xiàn)思路

    react 下拉框內(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ù)展示問題

    聊聊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

最新評(píng)論