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

Mostovoy Nikita
Nov 6, 2017 · 1 min read

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

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

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

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

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

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

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

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

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

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

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

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

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