We want to hear from you!Take our 2021 Community Survey!
Ta witryna nie jest już aktualizowana.Przejdź do react.dev

Fragmenty

These docs are old and won’t be updated. Go to react.dev for the new React docs.

These new documentation pages teach modern React:

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.

Is this page useful?Edytuj tę stronę