Fragment |
Fragment |
|---|---|
| React | |
<Fragment>, souvent utilisé via la syntaxe <>...</>, vous permet de regrouper des éléments sans noeud envelopper.
|
<> <OneChild /> <AnotherChild /> </> |
Référence
| <Fragment> |
Enveloppez les éléments dans <Fragment> pour les regrouper lorsqu'un seul élément est nécessaire. Regrouper des éléments dans Fragment n'a aucun effet sur le DOM résultant ; c'est comme si les éléments n'étaient pas groupés. La balise JSX vide <></> est généralement l'abréviation de <Fragment></Fragment>.
Propriétés
- key facultative : les fragments déclarés avec la syntaxe explicite <Fragment> peuvent avoir des clefs.
- ref optionnelle pour Canary : un objet ref (par exemple, issu de useRef) ou une fonction de rappel. React fournit une instance de FragmentInstance comme valeur de référence, implémentant des méthodes permettant d'interagir avec les noeuds DOM encapsulés par le Fragment.
Avertissements
Si vous souhaitez transmettre une clef à un fragment, vous ne pouvez pas utiliser la syntaxe <>...</>. Vous devez importer explicitement le fragment depuis «react» et afficher <Fragment key={yourKey}>...</Fragment>.
React ne réinitialise pas l'état lorsque vous passez du rendu <><Child /></> à [<Child />] et inversement, ou lorsque vous passez du rendu <><Child /></> à <Child /> et inversement. Cela ne fonctionne qu'à un seul niveau : par exemple, passer de <><><Child /></></> à <Child /> réinitialise l'état. Voir la sémantique précise ici.
Utilisation
Renvoyer plusieurs éléments
Utilisez Fragment, ou la syntaxe équivalente <>...</>, pour regrouper plusieurs éléments. Vous pouvez l'utiliser pour placer plusieurs éléments à l'emplacement où un seul élément peut être placé. Par exemple, une composante ne peut renvoyer qu'un seul élément, mais en utilisant Fragment, vous pouvez regrouper plusieurs éléments et les renvoyer ensemble :
Les fragments sont utiles car regrouper des éléments avec un fragment n'a aucun effet sur la mise en page ni sur les styles, contrairement à un élément DOM encapsulé. Si vous examinez cet exemple avec les outils du navigateur, vous constaterez que tous les noeuds DOM <h1> et <article> apparaissent comme des frères, sans encapsulation :
- export default function Blog() {
- return (
- <>
- <Post title="An update" body="Cela fait longtemps que je n'ai pas posté..." />
- <Post title="Mon nouveau blog" body="Je commence 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>
- );
- }