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接口的返回類型是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)文章！

您可能感興趣的文章: