Компонент, я твой отец

При разработке веб-приложений на React нередко возникает необходимость переиспользовать логику компонентов, полностью меняя их внешний вид. Чаще всего для этого используют Компоненты Высшего Порядка (Higher-Order Components), но есть и другие подходы, которые, в зависимости от решаемой задачи, могут оказаться более удобными.

Рассмотрим менее известный способ под названием «Function as Child Components» (FaCC), при котором компонент получает в качестве потомков не элементы, а функцию, что дает возможность управлять рендером из родителя.

Например, если в интерфейсе много выпадающих списков с одинаковой логикой (показать/скрыть), но выглядят они абсолютно по-разному, то решение с помощью FaCC может выглядеть вот так:
https://bitbucket.org/snippets/OlegChulakovStudio/LeEGkg

Интерактивное демо с более подробным кодом:
https://codesandbox.io/s/8x2183nj5j

Также, чтобы лучше понять ситуации, в которых может быть полезен этот подход, можно посмотреть популярные библиотеки, которые его используют: react-motion, react-media, PayPal Downshift.