迹忆客 专注技术分享

当前位置:主页 > 学无止境 > WEB前端 >

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

作者:迹忆客 最近更新:2022/04/26 浏览次数:

当我们尝试从函数组件返回元素数组时,会发生 React.js 错误“Type '() => JSX.Element[]' is not assignable to type FunctionComponent”。 要解决该错误,需要将元素数组包装到 React 片段中。

React JSXElement 错误

下面是错误发生的示例。

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 或 null。

这意味着我们只能返回一个 React 元素或一个空值。

为了避免类型错误,我们必须将数组封装到 React 片段中

import React from 'react';

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

export default App;

当我们需要在不向 DOM 添加额外节点的情况下对元素列表进行分组时,会使用片段。

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

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 添加额外的节点。

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

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 元素。

除非注明转载,本站文章均为原创或翻译,欢迎转载,转载请以链接形式注明出处

本文地址:

迹忆客

专注技术分享,项目实战分享!

技术宅 乐于分享 7年编程经验
社交账号
  • https://www.github.com/onmpw
  • qq:1244347461

热门文章

教程更新

热门标签

扫码一下
查看教程更方便