属性 \'title\' 在类型 \'IntrinsicAttributes\' 上不存在答案

【问题标题】：Property 'title' does not exist on type 'IntrinsicAttributes'属性 \'title\' 在类型 \'IntrinsicAttributes\' 上不存在
【发布时间】：2022-12-30 20:38:44
【问题描述】：

我在使用 React 和 TS 时遇到这个问题 - 在映射虚拟值数组时，其中一个属性始终为红色。我的代码：

项目列表.tsx

const DUMMY_PROJECTS = [
    {
        id: "p1",
        title: "My bug business",
        description: "A very cool and stinky one",
        image:
        "https://i.pinimg.com/originals/61/e3/55/61e3552467f1f697195b9ea9b07c9cd5.jpg",
    },
    {
        id: "p2",
        title: "My bug business",
        description: "A very cool and stinky one",
    image:
    "https://i.pinimg.com/originals/61/e3/55/61e3552467f1f697195b9ea9b07c9cd5.jpg",
},
];

const ProjectList = () => {
  return (
    <ul className={classes.project_display}>
      {DUMMY_PROJECTS.map((project) => {
        return <ProjectList
          key={project.id}
          title={project.title} //problematic 
          description={project.description}
          image={project.image}
        />;
      })}
    </ul>
  );
};

项目项.tsx

interface ProjectProps {
  title: string;
  description: string;
  image: string;
}

const ProjectItem:React.FC<ProjectProps> = (props:ProjectProps) => {
  return (
    <Card style={{ width: "18rem" }}>
      <Card.Img variant="top" src={props.image} />
      <Card.Body>
        <Card.Title>{props.title}</Card.Title>
        <Card.Text>{props.description}</Card.Text>
        <Button variant="primary">Details</Button>
      </Card.Body>
    </Card>
  );
};

它抛出这个错误：Type '{ key: string;标题：字符串；描述：字符串；图片：字符串； }' 不可分配给类型 'IntrinsicAttributes'。 “IntrinsicAttributes”类型上不存在属性“title”。

我尝试将 type: any 放入所有值，但没有成功

【问题讨论】：

您呼叫了ProjectList 而不是ProjectItem。
不，我真的做到了。谢谢，我从来没有真正检查过这个！

标签： reactjs typescript react-props

【解决方案1】：

尝试制作 ProjectProps 类型数组的 DUMMY_PROJECTS

const DUMMY_PROJECTS: ProjectProps[] = [
    {
        id: "p1",
        title: "My bug business",
        description: "A very cool and stinky one",
        image:
        "https://i.pinimg.com/originals/61/e3/55/61e3552467f1f697195b9ea9b07c9cd5.jpg",
    },
    {
        id: "p2",
        title: "My bug business",
        description: "A very cool and stinky one",
    image:
    "https://i.pinimg.com/originals/61/e3/55/61e3552467f1f697195b9ea9b07c9cd5.jpg",
},
];

【讨论】：

不，仍然是同样的错误

【解决方案2】：

我调用了 ProjectList 而不是 ProjectItem

【讨论】：