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

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

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

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

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

Создание базы

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

Как вы можете видеть ниже, он в основном выглядит как обычный компонент с небольшим количеством элементов. У нас есть компонент, называемый контейнером, и мы передаем наши классы, которые пользователь может предоставить нам так же, как и наши собственные. Здесь функция classNames представляет собой пакет, который я использую для объединения имен классов.

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

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

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

Добавление компонентов

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

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

Это может показаться запутанным, однако мы просто используем возможности JavaScript. К функции могут быть присоединены другие функции или методы. Затем мы можем вызывать эти методы в любое время. Если вы хотите глубже погрузиться в эту тему, вы можете прочитать статью, которую я написал об этом здесь.

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

Использование нашего компонента

Теперь самое интересное. Давайте воспользуемся нашим новым компонентом. Преимущество нашего нового компонента в том, что мы можем использовать в компоненте Card столько, сколько захотим.

Сначала мы добавляем наш базовый компонент Card, который является просто контейнером для остальных наших компонентов. Затем мы можем добавить наш заголовок, где поместите текст заголовка. А затем наш компонент тела, куда мы можем добавить нашу основную информацию. И, наконец, мы добавляем наш текстовый компонент, который можно использовать в качестве субтитров.

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

Подведение итогов

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

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