(React) 类型 ‘() => JSX.Element[]’ 不可分配给类型 FunctionComponent

作者

(React) 类型 ‘() => JSX.Element[]’ 不可分配给类型 FunctionComponent

(React) Type ‘() => JSX.Element[]’ is not assignable to type FunctionComponent

当我们尝试从函数组件返回元素数组时，会发生 React.js 错误“Type ‘() => JSX.Element[]’ is not assignable to type FunctionComponent”。

要解决该错误，请将元素数组包装到 React 片段中。

jsx 元素不可分配类型函数组件

以下是错误发生方式的示例。

应用程序.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 中的函数组件返回一个数组。

但是，该FunctionComponent接口的返回类型是ReactElement
or null。

因此我们只能返回一个 React 元素或一个null值。

将数组包装在 React 片段中

为了解决类型错误，我们必须将数组包装在
React 片段中。

应用程序.tsx
import React from 'react';

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

export default App;

当我们需要对元素列表进行分组而不向 DOM 添加额外的节点时，可以使用片段。

您可能还会看到正在使用更详细的片段语法。

应用程序.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;

上面的两个示例实现了相同的结果 – 它们对 elements 元素列表进行分组，而不向 DOM 添加额外的节点。

将数组包装在另一个 DOM 元素中

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

应用程序.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 元素。