Question

我有一个接收prop items的组件，定义为任何类型的数组。它遍历此数组可以调用数组中每个项目的prop render：

type ResultCardsProps = {
  items: *[],
  render: * => Node,
};

const ResultCards = ({ items, render, ...props }: ResultCardsProps) => (
  <div {...props}>
    {items.map(render)}
  </div>
);

以下是我如何使用此组件的示例：

type Sport = { id: number, name: string };
type Props = { sports: Sport[] };

const SportsCards = ({ sports }: Props) => (
  <ResultCards
     items={sports}
     render={sport => <div>{sport.name}</div>} // Flow does not know the type for `sport` at this point
  />
);

有没有办法让Flow了解传递给render组件中SportsCard函数的类型？如果组件在同一个文件中，可以工作，但当放入不同的文件时，它会停止工作。我尝试使用泛型ResultCardsProps，但它没有什么区别：

type ResultCardsProps<T> = {
  items: T[],
  render: T => Node,
};

Answer 1

您快到了，您也只需通过ResultCards组件签名传递通用类型：

const ResultCards = <T>({ items, render, ...props }: ResultCardsProps<T>) => (
  <div {...props}>
    {items.map(render)}
  </div>
);

const SportsCards = ({ sports }: Props) => (
  <ResultCards
    items={sports}
    render={sport => (
      <div>
        {sport.name}
        <div>{sport.foo}</div>
      </div>
    )}
  />
);

// The above generates this Flow error:
// ^ Cannot get `sport.foo` because property `foo` is missing in `Sport` [1].

(Flow REPL)

使用React渲染道具的流程泛型

1 个答案: