注释从这开始~

总览

当咱们尝试从函数组件中返回元素组成的数组时，会产生"Type '() => JSX.Element[]' is not assignable to type FunctionComponent"谬误。为了解决该谬误，能够将元素数组包裹在React片段中。

这里有个示例用来展现谬误是如何产生的。

// App.tsximport 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的函数组件中返回一个数组。然而，FunctionComponent接口的返回类型是ReactElement或null。

这也就意味着，咱们能够只返回一个React元素或者null值。

React片段

为了解决该类型谬误，咱们必须将数组包裹在React片段（React fragment）中。

// App.tsximport React from 'react';const App: React.FunctionComponent = () => {  return (    <>      {['Alice', 'Bob'].map(element => (        <div key={element}>{element}</div>      ))}    </>  );};export default App;

当咱们须要对一个元素列表进行分组而不向DOM增加额定的节点时，就会用到片段。

React.Fragment

你可能还会看到应用了更加具体的片段语法。

// App.tsximport 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增加额定的节点。

div

另一个解决方案是将元素数组包裹在另一个DOM元素中，例如一个div。

// App.tsximport React from 'react';const App: React.FunctionComponent = () => {  return (    <div>      {['Alice', 'Bob'].map(element => (        <div key={element}>{element}</div>      ))}    </div>  );};export default App;

这依然合乎FunctionComponent接口中指定的返回类型，因为咱们的组件返回的是一个繁多的React元素。

总结

为了解决"Type '() => JSX.Element[]' is not assignable to type FunctionComponent"谬误，能够应用React片段或者div将元素数组进行包裹。