javascript - React Typescript hvordan man sender props og bruger dem i en underkomponent

Jeg bruger React og TypeScript og prøver at sende nogle data som prop til et børnekomponent og bruge det i børnekomponenten. Men jeg får en fejl, og jeg kan ikke forstå, hvorfor det skete, og hvordan jeg retter det. Jeg er også nybegynder i TypeScript.

Her er min overordnede komponent

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;

Her er fejl i forælderkomponenten ved elementer

(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)

Og når jeg i almindelig React og ES6 kan bruge disse props i en underkomponent sådan her:

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

men skal bruge disse props i børnekomponenten, hvis det vil være TypeScript?

Svar #1

Du skal angive, hvilken type props børnekomponenten ønsker. For eksempel:

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>
  )
}

Relaterede artikler