We want to hear from you!Take our 2021 Community Survey!
This site is no longer updated.Go to react.dev

Fragments

These docs are old and won’t be updated. Go to react.dev for the new React docs.

These new documentation pages teach modern React:

En React, il est courant pour un composant de renvoyer plusieurs éléments. Les fragments nous permettent de grouper une liste d’enfants sans ajouter de nœud supplémentaire au DOM.

render() {
  return (
    <React.Fragment>
      <ChildA />
      <ChildB />
      <ChildC />
    </React.Fragment>
  );
}

Il existe aussi une nouvelle syntaxe concise pour les déclarer.

Motivation

Il est courant qu’un composant renvoie une liste d’enfants. Prenez cette exemple de bout de code React :

class Table extends React.Component {
  render() {
    return (
      <table>
        <tr>
          <Columns />
        </tr>
      </table>
    );
  }
}

<Columns /> aurait besoin de renvoyer plusieurs éléments <td> pour que le HTML obtenu soit valide. Mais si une div parente était utilisée dans le render() de <Columns />, alors le HTML résultat serait invalide.

class Columns extends React.Component {
  render() {
    return (
      <div>
        <td>Bonjour</td>
        <td>Monde</td>
      </div>
    );
  }
}

Ce code donne en sortie le <Table /> suivant :

<table>
  <tr>
    <div>
      <td>Bonjour</td>
      <td>Monde</td>
    </div>
  </tr>
</table>

Les fragments résolvent ce problème.

Usage

class Columns extends React.Component {
  render() {
    return (
      <React.Fragment>        <td>Bonjour</td>
        <td>Monde</td>
      </React.Fragment>    );
  }
}

Ce qui donne en sortie le <Table /> correct suivant :

<table>
  <tr>
    <td>Hello</td>
    <td>World</td>
  </tr>
</table>

Syntaxe concise

Il existe une nouvelle syntaxe plus concise, que vous pouvez utiliser pour déclarer des fragments. Ça ressemble à des balises vides :

class Columns extends React.Component {
  render() {
    return (
      <>        <td>Bonjour</td>
        <td>Monde</td>
      </>    );
  }
}

Vous pouvez utiliser <>…</> de la même manière que n’importe quel élément, à ceci près que cette syntaxe n’accepte ni clés ni attributs.

Les fragments à clé

Les fragments déclarés explicitement avec la syntaxe <React.Fragment> peuvent avoir des clés (key, NdT). Un cas d’utilisation consisterait à faire correspondre une collection à un tableau de fragments—par exemple pour créer une liste de descriptions :

function Glossary(props) {
  return (
    <dl>
      {props.items.map(item => (
        // Sans la `key`, React produira un avertissement spécifique
        <React.Fragment key={item.id}>
          <dt>{item.term}</dt>
          <dd>{item.description}</dd>
        </React.Fragment>
      ))}
    </dl>
  );
}

key est le seul attribut qui peut être passé à Fragment. À l’avenir, nous prendrons peut-être en charge des attributs supplémentaires, tels que des gestionnaires d’événements .

Démo interactive

Vous pouvez essayer la nouvelle syntaxe JSX de fragment avec ce CodePen.

Avez-vous trouvé cette page utile ?Modifier cette page