Question

我的React组件有一个名为propWhichIsArray的道具，它将是一个对象数组。这些对象将有一个id（它是一个ID）和text（它是一个字符串）。如何使用TypeScript键入？

type Props = {
  propWhichIsArray: {
    id,
    text: string;  
  }[]
};

const Component: React.FC<[Props]> = ({ propWhichIsArray }) => {
  //

出现错误：

属性'propWhichIsArray'在类型'[Props]＆{children ?:上不存在： ReactNode; }'。 TS2339

Answer 1

主要问题是您正在执行React.FC<[Props]>而不是React.FC<Props>。用方括号创建一个tuple类型，其第零个元素为Props类型，然后使该元组成为组件的props。另外，我可能会指定道具作为界面。

interface Props {
  propWhichIsArray: {
    id: ID; // I assume ID is defined elsewhere
    text: string;
  }[]
}

const Component: React.FC<Props> = ({ propWhichIsArray }) => {

如果数组中的该数据正在其他地方使用，则可能需要将其拉到其自己的接口：

interface Thingamajig {
  id: ID;
  text: string;
}

interface Props {
  propWhichIsArray: Thingamajig[];
}

React组件的TypeScript类型，其中prop是对象数组？

1 个答案: