如何 map typescript 中的 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”類型、道具、鍵中的以下屬性

我期待 output

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

我的 typescript 代碼有什么問題嗎？

謝謝

Answer 1

您不需要聲明 function MidNumbers的返回類型。 Array<Element>是錯誤的類型，無論如何將 function 變量本身聲明為類型FC<shapeMidNumbersInput>自動正確推斷返回類型，因為通用 class 會為您執行此操作。

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