Возврат нескольких дочерних элементов в React

Development | Amber | Комментировать запись

С появлением React 16 разработчики получили возможность возвращать несколько дочерних элементов в методе рендеринга компонента, используя массив компонентов, элементов и/или строк. Например, в React 16 стал допустимым такой синтаксис:

class App extends Component {
  render() {
    return [
      <Card key="1" />,
      'Just a text node',
      <Card key="2" title="Hello" content="I'm just a card in the world" />
    ];
  }
}

Примечание: Преимущество возможности возвращать несколько элементов заключается в том, что теперь нам не нужно включать лишние элементы div, в которые мы оборачиваем элементы (и которые в итоге загромождают DOM).

Это хорошо работает в stateless функциональных компонентах (SFC):

const App = () => {
  return [
    <Card key="1" />,
    'Just a text node',
    <Card key="2" title="Hello" content="I'm just a card in the world" />
  ];
};

Проблема в том, что синтаксис с применением массива не очень удобен, здесь необходимо добавить к элементам уникальный ключ. Решение, представленное в React 16.2, называется React Fragments.

Читайте также: Компоненты высшего порядка React: введение

Фрагменты React: введение

Используя компонент Fragment, мы теперь можем сделать то же самое, но уже без синтаксиса массива и без использования ключей. Просто используйте компонент React.Fragment для переноса возвращаемых элементов:

import React, { Component } from 'react';

class App extends Component {
  render() {
    return (
      <React.Fragment>
        <Card />
        Just a text node
        <Card title="Hello" content="I'm just a card in the world" />
      </React.Fragment>
    );
  }
}

Синтаксис можно сделать более лаконичным, напрямую импортировав компонент Fragment:

import React, { Component, Fragment } from 'react';

class App extends Component {
  render() {
    return (
      <Fragment>
        <Card />
        Just a text node
        <Card title="Hello" content="I'm just a card in the world" />
      </Fragment>
    );
  }
}

Сокращенный синтаксис

Если вы хотите добиться максимальной лаконичности, используйте новый сокращенный синтаксис, который выглядит как пустые теги – <> </>. Он применяется так:

import React, { Component } from 'react';

class App extends Component {
  render() {
    return (
      <>
        <Card />
        Just a text node
        <Card title="Hello" content="I'm just a card in the world" />
      </>
    );
  }
}

Babel 7 (который на момент написания этой статьи еще находится на стадии бета-тестирования) необходим для правильного преобразования этого сокращенного синтаксиса в <React.Fragment>.

Текущая стабильная версия приложения Create React App по умолчанию использует Babel 6.x, поэтому сокращенный синтаксис не будет работать прямо «из коробки». Чтобы получить возможность использовать этот синтаксис, вы можете установить последнюю нестабильную версию react-scripts, которая поддерживает бета-версию Babel 7:

$ yarn add react-scripts@next

Важно! Обратите внимание, что мы можем добавлять свойства к фрагменту при помощи обычного синтаксиса <React.Fragment>, но при использовании сокращенного синтаксиса это невозможно. Например, если при итерации массива возвращается фрагмент верхнего уровня, мы можем добавить свойство key при помощи обычного синтаксиса, а при помощи сокращенного – нет.