children prop
Тема дорожной карты · React
Проп children — это специальный проп React, который позволяет компонентам получать и отображать произвольный JSX-контент, переданный между открывающим и закрывающим тегами. В React каждый компонент может обращаться к props.children для отображения вложенных элементов, что делает его основой для построения составных компонентов с макетами. Проп children открывает возможности для мощных паттернов: компоненты-обёртки, слотовые макеты и делегирование рендеринга без жёсткой связи между родительскими и дочерними компонентами. Фронтенд-разработчики используют children для построения гибких UI-примитивов — таких как <Card>, <Modal> и <Layout>, — которые остаются независимыми от своего содержимого. Понимание работы children в React, включая его взаимодействие с утилитами React.Children, необходимо для написания идиоматичных компонентных API.
Как это работает
children prop моделирует React-UI как дерево маленьких переиспользуемых единиц. Компонент — это функция, принимающая props (один объект-аргумент) и возвращающая JSX. Поток данных «родитель → ребёнок» односторонний: родители передают значения вниз через props; дети вызывают переданные через props коллбэки, чтобы сообщить наверх. props.children — специальный prop, хранящий JSX, вложенный между открывающим и закрывающим тегами. PropTypes (runtime) или TypeScript (compile-time) документируют и проверяют форму props.
Когда применять
Выносите компонент когда (а) один и тот же JSX повторяется, (б) у области UI есть ясное имя (Header, ProductCard, CommentList), (в) часть UI имеет независимый state. Не выносите слишком жадно — один 60-строчный компонент с формой часто яснее, чем 8 микрокомпонентов по разным файлам. Используйте children для "slot"-композиции; именованные props — для конкретных ролей (header={<X/>} vs <X>...</X>).
Типичные ошибки
Ловушки children prop: мутация props внутри ребёнка (props read-only — мутация это тихий баг); проброс огромных объектов через 5+ уровней детей (prop drilling — используйте Context или композицию); создание новых объектов/функций-литералов в render как props (<C onClick={() => ...}/> рендерит ребёнка каждый рендер родителя — мемоизируйте или вынесите); приём style={{...}} как prop замораживает гибкость дизайн-системы. Интерфейсы props — маленькие и именованные.