时间戳

首页 > 解决方案 > 在组件上传播道具并使用打字稿在组件内部进行解构

reactjs - 在组件上传播道具并使用打字稿在组件内部进行解构

问题描述

我想知道将道具传播和破坏与组件结合使用的最佳方法是什么。

我像这样传播我的道具：

<RepositoryItem {...node} />

在我像这样解构组件中的道具之后：

interface RepositoriesProps {
  name: string
  url: string
}

const RepositoryItem: React.FC<RepositoriesProps> = ({ name, url }) => {
  return (
    <div className="repository_item">
      {name} {url}
    </div>
  )
}

当然，这样做会出现以下错误：Type '{}' is missing the following properties from type 'RepositoriesProps': name, url在我调用组件的第一部分。

我怎样才能解决这个问题？还是不使用道具传播更好？

任何帮助将不胜感激！

标签： reactjstypescript

解决方案

您应该直接指定类型

const RepositoryItem: React.FC<RepositoriesProps> = ({ name, url }: RepositoriesProps) => {

并且您node应该具有类型扩展RepositoriesProps
节点：MyNode where MyNodeisinterface MyNode extends RepositoriesProps {}
但基本上我认为您应该只为node包含定义接口url并name为打字稿提供一些知识（不是{}）

推荐阅读