时间戳

首页 > 解决方案 > 对函数声明强制执行 TSX 道具类型内联，该函数声明使用对象解构来声明道具

reactjs - 对函数声明强制执行 TSX 道具类型内联，该函数声明使用对象解构来声明道具

问题描述

我有一个自定义类型

export class MyClass {
  name: string;
  img: string;

  constructor(name: string) {
    this.name = name;
    this.img = `/images/${name}.jpg`;
  }
}

我有一个无状态功能组件，它将该类型作为参数

export default (issue: Issue) => {
...
}

当我尝试创建无状态功能组件时

<MagazineCard issue={issues[0] as Issue} />

我得到错误

Type '{ issue: any; }' is not assignable to type 'IntrinsicAttributes & Issue'.

下面有一个解决方案，但我觉得我应该把这个材料留给其他人，他们可能会看到这个问题以获得替代解决方案和更深入的理解

初始化 JSX 时的对象解构，例如：

<MagazineCard {...issues[0]} />

为我的无状态功能组件的参数创建一个接口。

注意：不需要指定类型

道具类型

MagazineCard.propTypes = {
  issue: Issue
}

标签： reactjstypescriptobject-destructuring

解决方案

这就是它的完成方式

export default ({issue} : {issue : Issue}) => (
    //...Your JSX component
)

我很困惑，因为它对我来说似乎过于复杂，所以我在 reddit 上发了一个帖子，问为什么这是这样做的语法

推荐阅读