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

更新時間：2022年12月19日 11:34:17 作者：chuck

這篇文章主要為大家介紹了React報錯Type '() => JSX.Element[]' is not assignable to type FunctionComponent解決，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪

總覽

當我們嘗試從函數(shù)組件中返回元素組成的數(shù)組時，會產生"Type '() => JSX.Element[]' is not assignable to type FunctionComponent"錯誤。為了解決該錯誤，可以將元素數(shù)組包裹在React片段中。

這里有個示例用來展示錯誤是如何發(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代碼，因為我們能夠從React的函數(shù)組件中返回一個數(shù)組。然而，FunctionComponent接口的返回類型是ReactElement或null。

這也就意味著，我們可以只返回一個React元素或者null值。

React片段

為了解決該類型錯誤，我們必須將數(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;

當我們需要對一個元素列表進行分組而不向DOM添加額外的節(jié)點時，就會用到片段。

React.Fragment

你可能還會看到使用了更加詳細的片段語法。

// 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;

上面的兩個例子達到了相同的結果--它們對元素列表的元素進行分組，而沒有給DOM添加額外的節(jié)點。

div

另一個解決方案是將元素數(shù)組包裹在另一個DOM元素中，例如一個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接口中指定的返回類型，因為我們的組件返回的是一個單一的React元素。