Fragments JSX

Un fragment regroupe des enfants sans ajouter de balise au HTML produit.

Syntaxe#

Utilisez <>…</> ou importez Fragment. Le moteur rend les enfants dans l’ordre.

import { Fragment } from "@vincle/core";

// Long form
const items = (
  <Fragment>
    <li>One</li>
    <li>Two</li>
  </Fragment>
);

// Shorthand (requires jsxImportSource in tsconfig)
const items2 = (
  <>
    <li>One</li>
    <li>Two</li>
  </>
);

Quand utiliser les fragments#

Les fragments conviennent aux listes de voisins et aux composants qui doivent retourner plusieurs éléments. Un tableau de valeurs rendables fonctionne également.

function Breadcrumbs() {
  return (
    <>
      <a href="/">Home</a>
      <span>/</span>
      <a href="/docs">Docs</a>
      <span>/</span>
      <span>Components</span>
    </>
  );
}

Pour continuer#

Continuez avec les composants et les types JSX.