Реагируйте на Typescript, как отправить реквизит и использовать его в дочернем компоненте.

Question

Я использую React и TypeScript и пытаюсь передать некоторые данные, такие как prop, дочернему компоненту и использовать его в дочернем компоненте. Но я получаю ошибку, и я не могу понять, почему это произошло и как это исправить. Я новичок в TypeScript также.

Вот мой родительский компонент

import * as React from "react";
import ChildComponent from "./ChildComponent";

const data = [
  {
    title: "A",
    id: 1,
  },
  {
    title: "B",
    id: 1,
  },
];

const ParentComponent = () => {
   return (
      <ChildComponent items={data} />
   )
}

export default ParentComponent;

Вот ошибка в родительском компоненте у предметов

(JSX attribute) items: {
    title: string;
    id: number;
}[]
Type '{ items: { title: string; id: number; }[]; }' is not assignable to type 'IntrinsicAttributes'.
  Property 'items' does not exist on type 'IntrinsicAttributes'.ts(2322)

А когда в обычной реакции и es6 я могу использовать этот реквизит в дочерний компонент, подобный следующему:

const ChildComponent = (props) => {
   return (
      <div>
         {props.items.map((item) => (
           <p to={item.title}></p>
         ))} 
      </div>
   )
}

, но использовать этот реквизит в дочернем компоненте, если это будет TypeScript?

Answer 1

Вам необходимо указать, какой тип реквизита хочет дочерний компонент. Например:

interface Item {
  title: string;
  id: number;
}

interface ChildComponentProps {
  items: Item[]
}

const ChildComponent: React.FC<ChildComponentProps> = (props) => {
  return (
    <div>
      {props.items.map((item) => (
        <p to={item.title}></p>
      ))} 
    </div>
  )
}

Answer 2

Добавлено в ответ, если реквизиты могут быть нулевыми, вы ставите знак вопроса.

interface ChildComponentProps {
  items?: Item[]
}