如何在打字稿中为 Reach 组件映射元素数组？

Question

这是我的组件：

import React, { FunctionComponent as FC } from 'react';

type shapeMidNumbersInput = { arrMidNumbers: Array<number> };

const MidNumbers: FC<shapeMidNumbersInput> = ({ arrMidNumbers }): Array<Element> => (
  <section>
    {arrMidNumbers.map(item => (
      <div>{item}</div>
    ))}
  </section>
);

const Caller = () => <MidNumbers arrMidNumbers={[3, 4, 5]} />;

export default Caller;

我得到的错误是：

类型“JSX.Element[]”不可分配给类型“Element[]”。 “Element”类型缺少“Element”类型的以下属性：assignedSlot、attributes、classList、className 等 123 个。 “元素”类型缺少“ReactElement”类型、道具、键的以下属性

我期待输出

<section>
   <div>3</div>
   <div>4</div>
   <div>5</div>
</section>

我的打字稿代码有什么问题吗？

谢谢

Answer 1

你不需要声明函数MidNumbers的返回类型。 Array<Element> 是错误的类型，无论如何将函数变量本身声明为 FC<shapeMidNumbersInput> 类型会自动正确推断返回类型，因为泛型类会为您完成。

const MidNumbers: FC<shapeMidNumbersInput> = ({ arrMidNumbers }) => (
  <section>
    {arrMidNumbers.map(item => (
      <div>{item}</div>
    ))}
  </section>
);