Слоты в React. js

#frontend #react

Современные frontend-библиотеки и фреймворки для работы с UI, будь то React, Angular или Vue.js, решают важную задачу разделения интерфейса на отдельные компоненты. У каждой такой библиотеки свой синтаксис, API и подходы к реализации компонентов.

Работая с различным стеком технологий, специалисты Студии выделили одну полезную особенность в API распределения контента у фреймворков Vue. js и Angular — слоты. Мы решили перенять такой подход для своих React-приложений.

В React-компонентах по умолчанию дочерние элементы можно добавить только в определенное место JSX-разметки.

Такой подход хорош для решения большинства задач, но создает ряд трудностей для компонентов со сложной структурой, дочерние элементы которых должны быть разнесены в различные части JSX-разметки.

Такую задачу мы решаем с помощью API React.Children. Используя методы объекта Children, мы можем легко разделить список дочерних элементов на несколько отдельных групп — слотов. Все, что нужно сделать, — в цикле сопоставить тип дочернего элемента с компонентом, от которого он был создан.

Для наглядной демонстрации мы подготовили небольшой пример, в котором решена задача с разделением свойства children для компонента страницы. В результате было выделено три слота: header, content, footer.