打字稿错误：“List<Element>”缺少类型“ReactElement<any,any>”的以下属性：类型、道具、键答案

【问题标题】：Typescript error: 'List<Element>' is missing the following properties from type 'ReactElement<any, any>': type, props, key打字稿错误：“List<Element>”缺少类型“ReactElement<any,any>”的以下属性：类型、道具、键
【发布时间】：2022-01-09 23:29:39
【问题描述】：

我在我的项目中使用 typescript 和 react，我创建了一个简单的组件，我想在其中映射一个列表并创建 react 元素：

const FlightSchedule: React.FC<{ flightRoute: List<Entity<FlightLeg>> }> = ({flightRoute}) => flightRoute.map(route =>
    <DescriptionList key={route.get('flightId')}>
      <TermDescriptionGroup description={route.get('flightId')}/>
      <TermDescriptionGroup description={route.get('flightDate')} topMargin/>
    </DescriptionList>)

但是，我收到以下打字稿错误：

Type 'List<Element>' is missing the following properties from type 'ReactElement<any, any>': type, props, key

为什么会出现这个错误，我在这里做错了什么？

【问题讨论】：

我认为您需要向我们展示List、Entity 和FlightLeg 是什么。
也转储 React.FC：harrymt.com/blog/2020/05/20/react-typescript-react-fc.html

标签： reactjs typescript

【解决方案1】：

不幸的是，因为 React.FC 的签名是 returns a single ReactElement，所以传入列表中的（优雅的）map 将不起作用 - 您实际上返回了 ReactElements 的列表。

你需要把整个东西包装起来，就像这里的Fragment，然后在里面做映射：

const FlightSchedule: React.FC<{ flightRoute: List<Entity<FlightLeg>> }> = ({ flightRoute }) => (
  <>
    {flightRoute.map((route) => (
      <DescriptionList key={route.get('flightId')}>
        <TermDescriptionGroup description={route.get('flightId')} />
        <TermDescriptionGroup description={route.get('flightDate')} topMargin />
      </DescriptionList>
    ))}
  </>
)

【讨论】：