Если вы знакомы с React, то знаете, что создание повторно используемых компонентов - лучший способ избежать повторения себя на протяжении всего проекта. В конце концов, мы все хотим быть максимально «СУХИМИ» при кодировании.

Material-UI - это библиотека компонентов, аналогичная React Bootstrap, которая дает вам возможность добавлять предварительно разработанные компоненты в ваш проект React. Вы можете настроить эти компоненты по своему усмотрению. Material-UI отличается от React Bootstrap тем, что у него есть предпочтительный или самоуверенный способ разработки приложений, называемый Material Design. Материальный дизайн может помочь избавиться от догадок при разработке красивых приложений. Если вы хотите узнать о нем больше, вы можете просмотреть это здесь.

Настраивать

Прежде чем мы начнем, вам нужно убедиться, что у вас настроено несколько вещей. Вы, конечно, захотите, чтобы Material-UI был установлен и готов к работе. Вы можете узнать, как его настроить здесь. Это довольно легко настроить, если вы раньше использовали библиотеку компонентов, такую ​​как React Bootstrap.

В этой статье также предполагается, что вы используете Material-UI на протяжении всего проекта. Вам не обязательно использовать только Material-UI в своем проекте, но внешний вид вашего приложения может отличаться, если вы переходите с React Bootstrap на Material-UI в одном и том же проекте. Я бы порекомендовал придерживаться одного или другого.

При этом все сказано ... Приступим!

Сборка нашего компонента

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

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

Диалог

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

DialogTitle и текст диалога

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

Контекст диалога

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

Боковое примечание: если вы не знакомы с опорой children, это специальная опора, которая с помощью реакции дает вам возможность передать дочерние элементы (другие компоненты, которые будут внутри другого компонента) вашему компоненту. Эта опция полезна, если родительский компонент не знает, какой дочерний компонент будет раньше времени. Если вам нужна дополнительная информация о детском реквизите, читайте здесь.

Действия в диалоговом окне

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

PropTypes

Поговорим о PropTypes.

Ниже у нас есть все реквизиты, которые нужны нашему Компоненту или которые могут использоваться для правильной работы. PropTypes важны, потому что они позволяют вам (через 1 месяц) или другим разработчикам точно увидеть, как использовать ваш компонент. Он сообщает им не только «что» передать, но и тип, который он примет. Это очень удобно, потому что, если они передадут неправильный тип, они получат сообщение об ошибке, позволяющее им точно знать, что исправить. Лучшее, что вы можете сделать, - это настроить себя и других разработчиков на успех.

Реализация нашего многоразового диалогового компонента

Во-первых, давайте импортируем его.

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

Теперь все, что нам нужно сделать, это реализовать наш Modal.

Вы видите, что весь наш реквизит наполняется. Опорой Children в данном случае является наш h1. Это «дочерний элемент» нашего пользовательского компонента. Однако это может быть любой JSX или компонент, который вы хотите добавить.

Последние мысли

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

Если вам понравилась эта статья, посмотрите другие мои здесь.