Компоненты высшего порядка и реакция

Для любопытных

Проблема

Допустим, у вас есть вид, похожий на

Мы видим общий шаблон упаковки наших компонентов в ‹div› с некоторыми классами позиционирования (они применяют верхнее и нижнее поля).

Один из способов решить эту проблему

Одним из решений может быть передача значений интервала через props и добавление значения в className на IconLabelValueRow.

Тогда SomeView будет выглядеть так:

Другая проблема

Но это не решает проблемы для EditValueRow. Нам нужно будет скопировать и вставить преамбулу свойств spaceTop и spaceBottom в другой компонент следующим образом:

Итак, теперь SomeView выглядит так:

Но копирование + вставка нас огорчает, так как же украсить компонент компонуемым образом?

Лучшее решение

Введите функции высшего порядка. Функция высшего порядка принимает компонент и в этом примере возвращает функцию без состояния.

И теперь мы можем использовать это в IconLabelValueRow.

и в EditLabelRow:

И теперь мы живем в счастливом мире.