Рендеринг массива элементов в качестве компонента.

В 15-м и ниже React для того, чтобы вернуть набор элементов или строку нужно было писать свои врапперы, например:

16-й React позволил возвращать из метода render массив или строку. Если вернуть строку стало очень удобно:

То при возвращении массива из компонента мы получаем несколько неудобных моментов:

В этом коде есть несколько неудобств:

  1. Нужно прописывать атрибуты key
  2. Нужно после каждого элемента добавлять запятую (так как массив)

Если запятые — это меньшее зло, то указывать key для элементов, которые, по сути, не особо являются массивом — очень неудобно и затратно.

Как это можно упростить?

Самое простое решение — обернуть компоненты в другой компонент, который просто в функции render вернёт props.children:

Этот компонент максимально простой и понятный. Благодаря ему мы создаем эдакую вложенность только на уровне React-компонентов и избавляемся от лишних атрибутов key, удаляем описание элементов в виде массива:

У меня этот компонент используется в нескольких проектах, поэтому для удобства я его вынес в отдельный пакет:

Пакет работает как CommonJS так и AMD модуль.

Lead developer at talantix.ru

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store