J'utilise React et TypeScript et j'essaie de transmettre des données telles que prop au composant enfant et de l'utiliser dans le composant enfant. Mais j'obtiens une erreur et je ne peux pas comprendre pourquoi et comment y remédier. Je suis aussi un débutant sur TypeScript.

Voici mon composant parent

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;

Voici une erreur dans le composant parent aux éléments

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

Et quand en réaction régulière et es6, je peux utiliser ces accessoires dans un composant enfant comme ceci:

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

Mais ont utilisé ces accessoires dans le composant enfant si ce sera TypeScript?

2
ciz30 25 avril 2020 à 23:20

2 réponses

Meilleure réponse

Vous devez spécifier le type d'accessoires souhaité par le composant enfant. Par exemple:

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>
  )
}
2
Nicholas Tower 25 avril 2020 à 20:23

Ajouté à la réponse, si les accessoires peuvent être nuls, vous mettez un point d'interrogation.

interface ChildComponentProps {
  items?: Item[]
}
1
tksilicon 25 avril 2020 à 20:32