Reactjs 组件上不可分配的类型

我正在学习

React

，因此我围绕

Github

API制作了一个小应用程序，我试图列出所有用户存储库，因此我创建了一个

RepoItem

组件，其中包含以下结构：

import React from 'react';

export interface RepoItem {
  id: string;
  name: string;
  html_url: string;
}

export const RepoItem = ({ repo }: RepoItem) => {
  return (
    <div className="card">
      <h3>
        <a href={repo.html_url}>{repo.name}</a>
      </h3>
    </div>
  );
};

问题是，在这一行

中，您应该替换

export const RepoItem=（{repo}:RepoItem）=>{

与

export const RepoItem=（{repo}:{repo:RepoItem}）=>{

或

export const RepoItem:React.FC=（{repo}）=>{

否则，您键入的是
props
对象，而不是
props.repo
您应该替换的对象

export const RepoItem=（{repo}:RepoItem）=>{

与

export const RepoItem=（{repo}:{repo:RepoItem}）=>{

或

export const RepoItem:React.FC=（{repo}）=>{

否则，您键入的是
props
对象，而不是
props.repo
理想情况下，您只需为组件创建
props
，然后添加
React.SFC
作为最正确的返回值：

从“React”导入React；
导出接口项{
id：字符串；
名称：字符串；
html_url:string；
}
界面道具{
回购：回购项目
}
export const RepoItem:React.SFC=（{repo}）=>{
返回(
);
};

同样，对于其他组件，但请记住，
SFC
用于无状态，
FC
用于有状态
理想情况下，您只需为组件创建一个
道具，然后添加
React.SFC
作为最正确的返回值：

从“React”导入React；
导出接口项{
id：字符串；
名称：字符串；
html_url:string；
}
界面道具{
回购：回购项目
}
export const RepoItem:React.SFC=（{repo}）=>{
返回(
);
};

同样，对于其他组件，请记住，
SFC
用于无状态，
FC
用于有状态
如果我应用您的解决方案，我得到：
Binding元素“RepoItem”隐式具有“any”类型。
您确定吗？@sfarzoso对此表示抱歉。我添加了正确的选项。如果我应用您的解决方案，我得到：
Binding el“RepoItem”隐式地有一个“any”类型。
你确定吗？@sfarzoso很抱歉。我添加了正确的选项。似乎SFC被弃用了啊似乎它被替换是为了更好的意义
无状态组件
，但这根本不是什么大问题似乎SFC被弃用了啊似乎它被替换是为了更好的意义
状态sComponent
但这根本不是什么大问题
import React from 'react';
import { RepoItem } from './repoItem';

interface Repos {
  repos: Array<RepoItem>;
}

export const Repos = ({ repos }: Repos) => {
  return repos.map((repo: RepoItem) => <RepoItem repo={repo} key={repo.id} />);
};