React + Typescript对象支持组件错误

Question

简单的情况；我正在呈现“评论”列表。这些是使用以下属性类型提供的：

export interface Props {
    title: string;
    name: string;
    reviewdesc: string;
    rating: number;
}

映射父组件中的结果：

{reviews.map((review: Props) => {
    return <Review data={review} />;
})}

并在子组件中使用相同的Proptypes：

const Review = (data: Props) => { ...

这给了我这个错误：

Type '{ data: Props; }' is not assignable to type 'IntrinsicAttributes & Props'.
  Property 'data' does not exist on type 'IntrinsicAttributes & Props'.

感觉就像我忘记了一件小事。我以为我应该在子组件中抓住像{data}这样的道具，但是它给出了：

Property 'data' does not exist on type 'Props'.

Answer 1

您错误地传递了道具。使用

<Review { ...review } />

...被称为spread运算符，它将对象的属性“传播”到该元素的道具中。