<Fragment> (<>...</>)

<Fragment>, qu’on utilise souvent via la syntaxe <>...</>, vous permet de grouper des éléments sans balise enrobante.

<>
  <OneChild />
  <AnotherChild />
</>

Référence
- <Fragment>
Utilisation

Référence

`<Fragment>`

Enrobez des éléments dans un <Fragment> pour les grouper dans des situations ou vous ne devez fournir qu’un seul élément. Grouper des éléments dans un <Fragment> n’a pas d’effet sur le DOM résultat ; c’est comme si les éléments n’étaient pas groupés. La balise vide <></> en JSX est utilisée la plupart du temps comme version concise de <Fragment></Fragment>.

Props

key optionnel : les fragments déclarés explicitement avec la syntaxe <Fragment> peuvent avoir une keys.

Limitations

Si vous souhaitez utiliser une key dans un Fragment, vous ne pouvez pas utiliser la syntaxe <>...</>. Vous devez explicitement importer Fragment depuis 'react' et écrire <Fragment key={yourKey}>...</Fragment>.
React ne réinitialise pas l’état quand vous passez d’une structure <><Child /></> à [<Child />] et inversement, ni quand vous passez de <><Child /></> à <Child /> et inversement. Ça ne marche qu’à un niveau de profondeur : par exemple, passer de <><><Child /></></> à <Child /> réinitialise l’état. Consultez la sémantique précise ici.

Utilisation

Renvoyer plusieurs éléments

Utilisez Fragment, ou la syntaxe équivalente <>...</>, afin de grouper plusieurs éléments ensemble. Vous pouvez l’utiliser pour passer plusieurs éléments là où un seul élément est attendu. Par exemple, un composant ne peut renvoyer qu’un seul élément, mais avec un Fragment vous pouvez grouper plusieurs éléments et renvoyer ce groupe :

function Post() {
  return (
    <>
      <PostTitle />
      <PostBody />
    </>
  );
}

Les Fragments sont utiles car grouper des éléments avec un Fragment n’as pas d’effet sur la mise en page ou les styles, contrairement à l’enrobage par une balise conteneur telle qu’un élément du DOM. Si vous inspectez cet exemple avec les outils du navigateur, vous verrez que toutes les balises <h1> et <p> du DOM apparaissent au même niveau (avec le même parent) sans balise enrobante :

Fork

export default function Blog() {
  return (
    <>
      <Post title="Des nouvelles" body="Ça fait un moment que je n’ai pas écrit..." />
      <Post title="Mon nouveau blog" body="Je démarre un nouveau blog !" />
    </>
  )
}

function Post({ title, body }) {
  return (
    <>
      <PostTitle title={title} />
      <PostBody body={body} />
    </>
  );
}

function PostTitle({ title }) {
  return <h1>{title}</h1>
}

function PostBody({ body }) {
  return (
    <article>
      <p>{body}</p>
    </article>
  );
}

Deep Dive

Comment utiliser un Fragment sans la syntaxe spéciale ?

L’exemple ci-dessus revient à importer Fragment depuis React :

import { Fragment } from 'react';

function Post() {
  return (
    <Fragment>
      <PostTitle />
      <PostBody />
    </Fragment>
  );
}

Normalement vous n’aurez pas besoin d’utiliser ça à moins de vouloir associer une key à votre Fragment.

Affecter plusieurs éléments à une variable

Comme pour tous les autres éléments, vous pouvez affecter des Fragment à des variables, les passer en tant que props, etc. :

function CloseDialog() {
  const buttons = (
    <>
      <OKButton />
      <CancelButton />
    </>
  );
  return (
    <AlertDialog buttons={buttons}>
      Êtes vous sûr·e de vouloir quitter cette page ?
    </AlertDialog>
  );
}

Grouper des éléments et du texte

Vous pouvez utiliser Fragment pour grouper du texte et des éléments :

function DateRangePicker({ start, end }) {
  return (
    <>
      De
      <DatePicker date={start} />
      à
      <DatePicker date={end} />
    </>
  );
}

Afficher une liste de Fragments

Voici un cas de figure où vous devez écrire Fragment explicitement plutôt que d’utiliser la syntaxe <></>. Quand vous affichez plusieurs éléments dans une boucle, vous avez besoin d’associer une key à chaque élément. Si les éléments compris dans la boucle sont des Fragments, vous devez utiliser la syntaxe classique JSX afin de fournir la prop key :

function Blog() {
  return posts.map(post =>
    <Fragment key={post.id}>
      <PostTitle title={post.title} />
      <PostBody body={post.body} />
    </Fragment>
  );
}

Vous pouvez inspecter le DOM pour vérifier qu’il n’y a pas d’élément enrobant autour des enfants du Fragment :

Fork

import { Fragment } from 'react';

const posts = [
  { id: 1, title: 'Des nouvelles', body: 'Ça fait un moment que je n’ai pas écrit...' },
  { id: 2, title: 'Mon nouveau blog', body: 'Je démarre un nouveau blog !' }
];

export default function Blog() {
  return posts.map(post =>
    <Fragment key={post.id}>
      <PostTitle title={post.title} />
      <PostBody body={post.body} />
    </Fragment>
  );
}

function PostTitle({ title }) {
  return <h1>{title}</h1>
}

function PostBody({ body }) {
  return (
    <article>
      <p>{body}</p>
    </article>
  );
}

PreviousComponents Next<Profiler>