Jak działa znacznik Fragments w React?

Fragments to sposób na grupowanie kilku elementów bez konieczności dodawania dodatkowych, niepotrzebnych elementów do drzewa DOM, takich jak <div>. Pozwala to na utrzymanie czystszego kodu HTML oraz struktury DOM, co jest szczególnie przydatne, gdy chcemy zwrócić wiele elementów z komponentu, ale nie chcemy, aby zostały one opakowane w dodatkowy kontener.

Jak używać Fragments:

Za pomocą React.Fragment: najbardziej podstawowy sposób użycia to opakowanie kilku elementów w komponent:

import React from 'react';

function MyComponent() {
  return (
    <React.Fragment>
      <h1>Title</h1>
      <p>Text</p>
    </React.Fragment>
  );
}

Aby kod był bardziej czytelny, React umożliwia korzystanie z krótszej składni:

import React from 'react';

function MyComponent() {
  return (
    <>
      <h1>Title</h1>
      <p>Text</p>
    </>
  );
}

Inne z tej kategorii: Programowanie
Takie tam: www.marczuk.org