Fragmenty

Często spotykanym wzorcem w Reakcie jest tworzenie komponentów, które zwracają wiele elementów. Fragmenty pozwalają zgrupować listę potomków bez konieczności dodawania zbędnych węzłów do drzewa DOM.

render() {
  return (
    <React.Fragment>
      <ChildA />
      <ChildB />
      <ChildC />
    </React.Fragment>
  );
}

Istnieje również nowy skrócony zapis do deklarowania fragmentów.

Motywacja

Zdarza się, że potrzebujemy w komponencie zwrócić listę potomków. Rozważmy poniższy przykład:

class Table extends React.Component {
  render() {
    return (
      <table>
        <tr>
          <Columns />
        </tr>
      </table>
    );
  }
}

Aby zapewnić poprawność wyrenderowanego kodu HTML, komponent <Columns /> powinien zwrócić kilka elementów <td>. Gdyby komórki tabeli, zwracane przez funkcję render() komponentu <Columns />, otoczyć np. elementem <div>, powstały w ten sposób kod HTML byłby nieprawidłowy.

class Columns extends React.Component {
  render() {
    return (
      <div>
        <td>Witaj</td>
        <td>Świecie</td>
      </div>
    );
  }
}

daje w rezultacie następującą strukturę dla komponentu <Table />:

<table>
  <tr>
    <div>
      <td>Witaj</td>
      <td>Świecie</td>
    </div>
  </tr>
</table>

Fragmenty rozwiązują ten problem.

Użycie

class Columns extends React.Component {
  render() {
    return (
      <React.Fragment>        <td>Witaj</td>
        <td>Świecie</td>
      </React.Fragment>    );
  }
}

daje w rezultacie następującą strukturę dla komponentu <Table />:

<table>
  <tr>
    <td>Witaj</td>
    <td>Świecie</td>
  </tr>
</table>

Skrócony zapis

Istnieje nowy, krótszy zapis służący do deklarowania fragmentów. Z wyglądu przypomina puste znaczniki:

class Columns extends React.Component {
  render() {
    return (
      <>        <td>Witaj</td>
        <td>Świecie</td>
      </>    );
  }
}

Możesz używać <></> tak samo jak innych komponentów. Nie możesz jednak przekazywać do niego klucza (key) ani żadnych innych właściwości.

Fragmenty zadeklarowane jawnie przy użyciu składni <React.Fragment> mogą posiadać klucze. Ma to zastosowanie, gdy zechcesz przemapować kolekcję na tablicę fragmentów — na przykład do stworzenia listy opisów:

function Glossary(props) {
  return (
    <dl>
      {props.items.map(item => (
        // Bez `key` React wyrzuci błąd
        <React.Fragment key={item.id}>
          <dt>{item.term}</dt>
          <dd>{item.description}</dd>
        </React.Fragment>
      ))}
    </dl>
  );
}

key jest jedyną właściwością, którą można przekazać do fragmentu. Możliwe, że w przyszłości dodamy wsparcie dla innych właściwości, np. procedur obsługi zdarzeń.

Demo

Możesz wypróbować nową składnię JSX dla fragmentów na tym CodePenie.