Comment renvoyer plusieurs éléments dans JSX

Comment contourner la limitation de JSX lorsque vous devez renvoyer plusieurs éléments à partir d'un composant

Lors de l'écriture de JSX dans React, il y a une mise en garde: vous devez renvoyer un élément parent. Pas plus d'un.

Par exemple, ce n'est pas possible:

const Pets = () => {
  return (
    <Dog />
    <Cat />
  )
}

Une façon «classique» de résoudre ce problème consiste à encapsuler les composants et autres éléments HTML dans undiv:

const Pets = () => {
  return (
    <div>
      <Dog />
      <Cat />
    </div>
  )
}

Cependant, cela pose un problème - il y a un élément HTML qui a été introduit juste pour faire fonctionner notre JSX, pas nécessaire dans le HTML résultant, mais c'est là que ça se termine.

Une solution consiste à renvoyer un tableau d'éléments JSX:

const Pets = () => {
  return [
      <Dog />,
      <Cat />
  ]
}

Une autre solution consiste à utiliser Fragment, une fonctionnalité relativement nouvelle de React qui résout le problème pour nous:

const Pets = () => {
  return (
    <Fragment>
      <Dog />
      <Cat />
    </Fragment>
  )
}

ça marche comme ledivélément que nous avons ajouté auparavant, mais il n'apparaîtra pas dans le HTML résultant rendu dans le navigateur. Gagnant-gagnant.

Téléchargez mon gratuitManuel React

Comment renvoyer plusieurs éléments dans JSX

Comment contourner la limitation de JSX lorsque vous devez renvoyer plusieurs éléments à partir d'un composant

Plus de tutoriels de réaction: