0Pricing
React Academy · Leçon

Emplacements nommés via les props d’objet

Implémenter des emplacements d’en-tête, de corps et de pied de page en transmettant du JSX via des props nommées.

Emplacements nommés via les props d’objet est une leçon React Academy gratuite sur CoddyKit. Ceci est la leçon 3 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage React Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours React Academy comprend 4 leçons au total.

Bienvenue

Dans cette leçon, vous implémenterez des emplacements nommés flexibles en transmettant du JSX par l'intermédiaire de propriétés nommées. Vous pourrez ainsi créer des composants de mise en page avec des zones d'en-tête, de corps et de pied de page, sans structure rigide basée sur children.

La limite de children

Une seule propriété `children` convient à une seule zone. Lorsqu'un composant a besoin de plusieurs zones de contenu indépendantes, comme une carte avec un en-tête et un pied de page, des propriétés nommées contenant du JSX sont la solution la plus claire.

Emplacements de propriétés nommées

Définissez une propriété pour chaque emplacement dans l'interface du composant. Le parent transmet du JSX à chaque propriété. Le composant affiche chaque emplacement à la bonne position.
function Card({ header, body, footer }) {
  return (
    <div className="card">
      <div className="card-header">{header}</div>
      <div className="card-body">{body}</div>
      <div className="card-footer">{footer}</div>
    </div>
  );
}

// Usage
<Card
  header={<h2>Title</h2>}
  body={<p>Content here</p>}
  footer={<button>OK</button>}
/>

Emplacements facultatifs

Rendez les emplacements facultatifs en ne les affichant que lorsque la propriété correspondante est évaluée comme vraie. Le même composant peut ainsi fonctionner avec ou sans pied de page, par exemple.
function Card({ header, children, footer }) {
  return (
    <div>
      {header && <div className="header">{header}</div>}
      <div className="body">{children}</div>
      {footer && <div className="footer">{footer}</div>}
    </div>
  );
}

Combiner children et des emplacements nommés

Utilisez `children` pour la zone de contenu principale et des propriétés nommées pour les zones secondaires. Cela suit le principe selon lequel le cas d'utilisation le plus fréquent doit être le plus simple à utiliser.
<Dialog
  title="Confirm"
  actions={<><button>Cancel</button><button>OK</button></>}
>
  <p>Are you sure?</p>  {/* children = primary slot */}
</Dialog>

TypeScript : typer les emplacements nommés

Typez les propriétés des emplacements nommés avec `React.ReactNode` pour accepter n'importe quel contenu JSX.
interface CardProps {
  header?: React.ReactNode;
  children: React.ReactNode;
  footer?: React.ReactNode;
}

Emplacements nommés ou composants composés

Les propriétés nommées sont simples et explicites. Les composants composés, comme ``, sont plus pratiques pour les familles de composants complexes, mais nécessitent davantage de configuration avec le contexte. Commencez par des propriétés nommées et migrez si nécessaire.

Transmettre des composants comme emplacements

Vous pouvez également typer un emplacement comme un composant React, plutôt que comme du JSX. Le parent transmet une référence de composant, et la mise en page l'affiche. La mise en page contrôle ainsi quand et combien de fois l'emplacement est affiché.
function Timeline({ renderItem, items }) {
  return (
    <ul>
      {items.map(item => (
        <li key={item.id}>{renderItem(item)}</li>
      ))}
    </ul>
  );
}

<Timeline
  items={data}
  renderItem={item => <EventCard event={item} />}
/>

Composer une mise en page avec des emplacements nommés

Les composants de mise en page utilisent largement les emplacements nommés. Un composant formant la structure d'une page, avec des emplacements `sidebar`, `toolbar` et `content`, permet à différentes pages de composer cette même structure tout en ayant un contenu complètement différent dans chaque zone.

Documenter les emplacements nommés

Les emplacements nommés se documentent d'eux-mêmes grâce aux interfaces TypeScript ou à PropTypes. Les consommateurs voient exactement quels emplacements sont disponibles et lesquels sont facultatifs, ce qui réduit le besoin de documentation externe.

Question rapide

Quel type TypeScript devez-vous utiliser pour une propriété d'emplacement nommé qui accepte n'importe quel JSX ?

Récapitulatif

Les propriétés d'emplacements nommés rendent les composants de mise en page flexibles et explicites. Utilisez children pour la zone principale, des propriétés nommées pour les zones secondaires, et typez-les avec React.ReactNode.

À suivre

Prochaine leçon : **Cloner et injecter des propriétés avec cloneElement** — vous utiliserez React.cloneElement pour transmettre des propriétés masquées du parent à ses enfants.

Questions Fréquemment Posées

La leçon « Emplacements nommés via les props d’objet » est-elle gratuite ?

Oui — le texte complet de « Emplacements nommés via les props d’objet » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours React Academy, passe à CoddyKit PRO. Le cours React Academy comprend 4 leçons au total.

Qu'est-ce que j'apprendrai dans « Emplacements nommés via les props d’objet » ?

Implémenter des emplacements d’en-tête, de corps et de pied de page en transmettant du JSX via des props nommées. Tu pratiques React Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.

Dois-je avoir de l'expérience pour commencer React Academy ?

Aucune expérience préalable n'est requise. React Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 3 sur 4.

Combien de temps prend la leçon « Emplacements nommés via les props d’objet » ?

La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.

Peux-tu écrire et exécuter du code dans cette leçon React Academy ?

Oui. Chaque leçon React Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.

Toutes les leçons de ce cours

  1. Principes fondamentaux de props.children
  2. Utilitaires React.Children
  3. Emplacements nommés via les props d’objet
  4. Cloner et injecter des props avec cloneElement
← Retour à React Academy