TL; DR: вы можете создать повторно используемый компонент Layout в React, не зная его вложенных компонентов, используя свойство React «children». Передав опору дочерних элементов в компонент Layout, вы можете добавить JSX of {children} в свой компонент, который будет вставлять любые вложенные компоненты в Layout, когда вы его вызываете.
Что такое детская опора?
React великолепен, поскольку позволяет разработчикам создавать наборы повторно используемых компонентов пользовательского интерфейса. Благодаря этому разработчики могут быстро создать красивую интерактивную веб-страницу из набора стандартных строительных блоков. Такая гибкость сопряжена с проблемами проектирования, поскольку вы никогда не можете полностью понять, как более мелкие компоненты будут взаимодействовать с компонентами компоновки.
Чтобы исправить эту неопределенность, React добавил свойство children, которое можно передать родительскому компоненту, чтобы указать, где должны отображаться вложенные компоненты. Это свойство помогает сделать компоненты более пригодными для повторного использования и устраняет ограничения дизайна, например, компоненты, которым необходимо знать все свои дочерние компоненты при написании.
Создание компонента макета с помощью дочернего элемента
Компоненты макета - отличный инструмент для добавления многоразовой структуры для полных страниц или даже для отдельных разделов страницы. Как разработчики, мы не всегда знаем, будем ли мы иметь 1 или 2 текстовых компонента в макете, или основной заголовок или заголовок раздела. Чтобы бороться с этой неопределенностью, мы можем использовать опору children для создания заполнителя для дочерних элементов нашего компонента Layout, которые будут отображаться.
Чтобы продемонстрировать это, я собираюсь создать набор небольших компонентов и компонент макета, чтобы показать, как вы будете использовать дочерние компоненты.
Давайте сначала начнем с написания нашего компонента Layout. Я буду использовать функциональный компонент, поскольку в этом примере нас не беспокоит сохранение состояния:
Здесь мы создаем и возвращаем обычный div, что не слишком увлекательно. Интересно то, как мы передаем дочерних элементов нашему компоненту Layout в качестве опоры.
Мы передаем «{children}» в Layout, который является просто props.children, но упрощен с помощью деструкции. Это позволяет нам брать любых дочерних элементов, которые мы вкладываем в наш компонент Layout, и отображать их как вложенные компоненты внутри этого компонента.
Там, где у нас есть JSX, «{children}» - это то место, где наши вложенные компоненты будут отображаться в том порядке, в каком они были объявлены. Этот простой подход является жестким, поскольку мы не контролируем порядок рендеринга компонентов или другие стили, применяемые к ним. Однако есть способ обойти порядок, в котором отображаются дочерние элементы.
Свойство children возвращает массив объектов, который с его индексированием объектов позволяет вызывать компоненты в определенных местах. Это обеспечивает большую гибкость в создании структуры для ваших компонентов, поскольку вы можете добавить дополнительный стиль к заголовкам, тексту, изображениям или любым другим дочерним элементам, которые будут размещены в вашем компоненте Layout. (Я бы порекомендовал, если вы пойдете по этому пути, чтобы предоставить другим разработчикам хорошую документацию о том, что ожидается и где это ожидается).
После написания нашего компонента Layout мы теперь будем вызывать его в нашем основном компоненте приложения:
Я создал и импортировал два других компонента, «MainHeader» и «PageText», которые не важны для этой демонстрации. Просто знайте, что один возвращает элемент заголовка h1, а другой - текстовый элемент div. Как видите, мы вложили оба этих компонента в наш компонент Layout.
Затем макет отображает это:
Компонент Layout принимает MainHeader и PageText как вложенные компоненты, которые хранятся в props.children, а затем возвращаются в оболочке div в Layout. Этот простой пример показывает, что мы можем установить стиль для компонента Layout и принять любое количество компонентов или элементов с этим примененным стилем.
Не имеет значения, передаем ли мы компоненты React или обычные элементы HTML, все, что мы объявляем в Layout, будет переведено на дочерние элементы в props и затем станет доступным для нашей оболочки div. Это невероятно мощный инструмент, позволяющий нам создавать действительно многоразовые и гибкие компоненты компоновки.
Последние мысли
Использование props.children - отличный способ создавать повторно используемые компоненты макета. Сообщите мне в комментариях, как вы используете или планируете использовать props.children для создания более чистых и модульных компонентов в ваших проектах!
- Зачем использовать композицию вместо наследования
- Что такое реквизит props.children
- Использование props.children для создания повторно используемого компонента макета
Примечания
