javascript - React + Typescript 对象 Prop 组件错误

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} 这样的 Props，但它给出了:

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

Answer 1

您传递 Prop 的方式不正确。使用，

<Review { ...review } />

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