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

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

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

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

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

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

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

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

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

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

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

xnimorz/rplain

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