Propriétés React saisies des attributs vers les enfants

Transférez les données comme des attributs HTML, définissez les props en TypeScript, déstructurez-les en toute sécurité, et gardez les props en lecture seule.

1068 mots

Props React avec TypeScript (débutant 2026)

Dans une série intitulée « Restarting React » destinée à React 19.2 et au TypeScript compatible avec le compilateur, la première version de ProductCard présentait un défaut : les champs des produits se trouvaient à l’intérieur du composant. La réutilisation exige des props — des données transmises depuis les parents, à l’instar des attributs HTML.

Transmettre les props comme des attributs

function ProductCard() {
  const product = { name: 'Mechanical Keyboard', price: 89000 }; // fixed
  return <h2>{product.name}</h2>;
}

// receiving side
function ProductCard(props) {
  return <h2>{props.name}</h2>;
}

Le parent détient les données ; l’enfant les affiche.

Typage des props

Définissez une interface (ou un type) pour l’objet props :

// passing side
<ProductCard name="Mechanical Keyboard" />
<ProductCard name="Wireless Mouse" />

type ProductCardProps = {
  name: string;
  price: number;
};

Le compilateur détecte les champs manquants et les types incorrects avant l’exécution.

Déstructuration pour plus de clarté

function ProductCard(props: ProductCardProps) {
  return (
    <div className="card">
      <h2>{props.name}</h2>
      <p>{props.price.toLocaleString()} won</p>
    </div>
  );
}

<ProductCard name="Keyboard" price={89000} />      // ✅ OK
<ProductCard name="Keyboard" />                     // 🔴 missing price — error
<ProductCard name="Keyboard" price="89000" />       // 🔴 price is a string — error

Gardez le type des props dans le paramètre de fonction afin que la déstructuration reste typée.

Props optionnels et valeurs par défaut

type ProductCardProps = {
  name: string;
  price: number;
};

// drop the props. and pull values out directly
function ProductCard({ name, price }: ProductCardProps) {
  return (
    <div className="card">
      <h2>{name}</h2>
      <p>{price.toLocaleString()} won</p>
    </div>
  );
}

Marquez les champs optionnels avec ? et fournissez des valeurs par défaut soit via la déstructuration, soit à l’aide de paramètres par défaut.

children

Le contenu entre les balises apparaît en tant que enfants :

type ProductCardProps = {
  name: string;
  price: number;
  discount?: number; // may or may not be present
};

function ProductCard({ name, price, discount = 0 }: ProductCardProps) {
  const finalPrice = price - discount;
  return (
    <div className="card">
      <h2>{name}</h2>
      <p>{finalPrice.toLocaleString()} won</p>
    </div>
  );
}

Déclarez les enfants de type React.ReactNode à moins que vous n’ayez besoin d’un contrat plus restreint.

Les voir dans les DevTools

// both are valid
<ProductCard name="Keyboard" price={89000} />              // discount is 0
<ProductCard name="Mouse" price={45000} discount={5000} />

Inspectez l’arbre des composants pour vérifier quels props sont réellement arrivés — c’est extrêmement utile lors du débogage des enveloppes.

Les props sont en lecture seule

type CardProps = {
  children: React.ReactNode;
};

function Card({ children }: CardProps) {
  return <div className="card">{children}</div>;
}// everything between the tags goes in as children
<Card>
  <h2>Mechanical Keyboard</h2>
  <p>89,000 won</p>
</Card>

N’altérez jamais les props à l’intérieur de l’enfant. Transférez l’état ou passez une fonction de mise à jour lorsque l’enfant doit demander une modification.

Conclusion

function ProductCard({ name, price }: ProductCardProps) {
  price = price * 2; // 🔴 absolutely forbidden — trying to change props directly
  return <p>{price} won</p>;
}

Les props combinés à TypeScript permettent de créer des interfaces utilisateur réutilisables avec des contrats en temps de compilation. Les prochains épisodes de la série abordent généralement l’état, les effets et le chargement de données — toujours avec des limites typées à chaque niveau.

Préférez des exemples courts que les lecteurs peuvent coller dans un environnement de test sans monorepo.

Préférez des exemples courts que les lecteurs peuvent coller dans un environnement de test sans avoir besoin d’un monorepo.

Tous les articles Envoyer le brief