] Введение

] Одной из наиболее полезных и широко используемых концепций в мире React является дизайнерский шаблон, поскольку они помогают сохранять масштабируемые коды и придавать добавленное значение компонентам, которые мы создаем.

существуют различные шаблоны, и в этой статье мы обсудим составные компоненты , расширенный шаблон, который особенно полезен для создания гибких и композиционных интерфейсов.

] Что такое составные компоненты?

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

компоненты работают вместе для достижения определенных поведений без создания сложных деревьев или чрезмерно сложной логики, которая будет трудно рефакторировать или понять в будущем.

Этот шаблон помогает устранить бурление от опоры, где мы передаем большое количество реквизитов через несколько компонентных слоев. Опоротное бурение может быть проблематичным, так как оно может привести к ненужным повторным ресторанам каждый раз, когда государство обновляется, поскольку каждое изменение состояния будет обновлять все дочерние компоненты.

пример составных компонентов можно увидеть в HTML -структуре тегов Select и Option:

Элемент SELECT работает как менеджер штата интерфейса, в то время как элементы опции настраивают, как должен функционировать компонент SELECT.

] Пример с использованием составных компонентов

в этом примере мы создадим модал, который разделен на два составных компонента: переключать и содержание. Они поделятся открытым/закрытым состоянием модала.

давайте просмотрим, как создать этот компонент шаг за шагом:

мы можем начать с создания контекста, который будет управлять состоянием Open/Close of the Modal:

создание базы модального компонента:

обратите внимание, что мы используем детей, чтобы захватить компоненты, которые будут размещены внутри модала. Мы хотим использовать его так:

теперь нам нужно создать компонент переключения, который будет нести ответственность за открытие Modal:

нам также нужен компонент контента, который будет нести ответственность за отображение контента модала:

Наконец, мы можем добавить оба компонента в наш модальный компонент, и он готов к работе! ?

usage:

Результат:

Таким образом, мы делаем создание и использование модалей чрезвычайно гибкими и повторно используемыми. Modal.toggle отвечает за запуск модального дисплея, в то время как modal.content должен отображать модальное содержание.

Эта структура позволяет разработчикам легко настраивать поведение и содержание модалов в соответствии с конкретными потребностями их приложений, делая код чище и более организованным.

] Другие примеры

мы также можем использовать составные компоненты в других контекстах, таких как:

аккордеонные компоненты:

Меню Компоненты:

все эти примеры являются гибкими и адаптируемыми, облегчая развитие, масштабируемость и использование компонентов.

] Упражнение

мы заметили, что кнопка закрытия была помещена внутри компонента контента, но было бы интересно иметь компонент, посвященный управлению закрытием модала. Вы можете создать что -то вроде close . Попробуйте экспериментировать и добавить этот компонент!

] Заключение

мы видели, как написание компонентов с использованием шаблона составных компонентов может быть полезным в наших приложениях. Мы также исследовали, как его реализовать, и просмотрели примеры того, где может соответствовать этот шаблон.

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

примечание: я разместил этот же контент на React4noobs, репозиторий BR, который объединяет статьи, созданные разработчиками во вселенной React. Стоит проверить!