3.10 Фрагменты

Общим примером в React является компонент, возвращающий несколько элементов. Фрагменты позволяют группировать список потомков без добавления дополнительных узлов в DOM:

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

Существует и короткий синтаксис, но пока что его поддерживают не все популярные инструменты

Общим примером является компонент, который возвращает список дочерних элементов. Рассмотрим пример куска кода на React:

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

<Columns/> должен возвращать несколько элементов <td>, чтобы отображаемый HTML был валидным. Но в то же время, если внутри метода render() компонента <Columns/> будет добавлен родительский узел <div>, то результирующий HTML-код будет невалидным.

    
  class Columns extends React.Component {
    render() {
      return (
        <div>
          <td>Hello</td>
          <td>World</td>
        </div>
      );
    }
  }
  
  

Результирующий вывод компонента <Table/> будет:

    
  <table>
    <tr>
      <div>
        <td>Hello</td>
        <td>World</td>
      </div>
    </tr>
  </table>
  
  

И тут на помощь приходят фрагменты.

В следующем примере мы объявляем фрагмент:

    
  class Columns extends React.Component {
    render() {
      return (
        <React.Fragment>
          <td>Hello</td>
          <td>World</td>
        </React.Fragment>
      );
    }
  }
  
  

который приводит к валидному выводу компонента <Table/>:

    
  <table>
    <tr>
        <td>Hello</td>
        <td>World</td>
    </tr>
  </table>
  
  

3.10.2.1 Короткий синтаксис

Существует новый, более короткий синтаксис, который можно использовать для объявления фрагментов. Он выглядит как пустые теги:

    
    class Columns extends React.Component {
      render() {
        return (
          <>
            <td>Hello</td>
            <td>World</td>
          </>
        );
      }
    }
  
  

Вы можете использовать синтаксис <></> таким же образом, как и любой другой элемент, за исключением того, что он не поддерживает ключи и атрибуты.

Обратите внимание, что многие инструменты его еще не поддерживают, поэтому вам пока остается явно писать <React.Fragment> и ожидать обновлений.

3.10.2.2 Фрагменты с ключами

Фрагменты, объявленные с явным синтаксисом <React.Fragment>, могут иметь ключи. Случай использования - маппинг коллекции в массив фрагментов - например, чтобы создать список описаний:

    
  function Glossary(props) {
    return (
      <dl>
        {props.items.map(item => (
          // Без указания `key`, React выбросит исключеие
          <React.Fragment key={item.id}>
            <dt>{item.term}</dt>
            <dd>{item.description}</dd>
          </React.Fragment>
        ))}
      </dl>
    );
  }
  
  

key- это единственный атрибут, который может быть передан фрагменту. В будущем разработчики могут добавить поддержку дополнительных атрибутов, таких как обработчики событий.

Вы можете попробовать новый JSX синтаксис фрагментов с помощью данного CodePen.