React + Typescript 对象道具对组件错误

Question

简单案例；我正在呈现“评论”列表。这些是使用以下 Proptype 提供的：

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 } />

...称为扩展运算符，它将对象的属性“扩展”为该元素的道具。