有反应渲染道具的流程仿制
有反应渲染道具的流程仿制
提问于 2018-03-21 21:59:12
我有一个接收支柱items的组件，它定义为任意类型的数组。它循环遍历这个数组，可以对数组中的每一项调用支柱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
/>
);是否有一种方法可以让流理解在render组件中传递给SportsCard函数的类型？如果组件位于同一个文件中，则会工作，但是当组件放在不同的文件中时，它就会停止工作。我尝试在ResultCardsProps中使用泛型，但这并没有什么区别：
type ResultCardsProps<T> = {
items: T[],
render: T => Node,
};Stack Overflow用户
发布于 2019-10-24 20:52:50
您就快到了--您只需要通过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].页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/49417215
复制相关文章
相似问题
腾讯云开发者
