Рендеринг массива элементов в качестве компонента.
В 15-м и ниже React для того, чтобы вернуть набор элементов или строку нужно было писать свои врапперы, например:
16-й React позволил возвращать из метода render массив или строку. Если вернуть строку стало очень удобно:
То при возвращении массива из компонента мы получаем несколько неудобных моментов:
В этом коде есть несколько неудобств:
- Нужно прописывать атрибуты key
- Нужно после каждого элемента добавлять запятую (так как массив)
Если запятые — это меньшее зло, то указывать key для элементов, которые, по сути, не особо являются массивом — очень неудобно и затратно.
Как это можно упростить?
Самое простое решение — обернуть компоненты в другой компонент, который просто в функции render вернёт props.children:
Этот компонент максимально простой и понятный. Благодаря ему мы создаем эдакую вложенность только на уровне React-компонентов и избавляемся от лишних атрибутов key, удаляем описание элементов в виде массива:
У меня этот компонент используется в нескольких проектах, поэтому для удобства я его вынес в отдельный пакет:
Пакет работает как CommonJS так и AMD модуль.
