В блоге на прошлой неделе я рассказал, как получать данные в компоненте класса и компоненте функции с помощью React Hooks. Сегодня мы рассмотрим, как реализовать модальное окно в обоих типах компонентов, и сравним ключевые различия. Начнем с реализации компонента класса.
Создайте модальный компонент - класс
Сначала мы импортируем несколько компонентов из React Bootstrap и создаем начальное состояние с nasaData установкой пустого объекта и showModal установленным на false. Следующим шагом будет получение данных НАСА и использование this.setState для присвоения этих данных nasaData.
Мы создаем функции handleShow и handleHide для переключения логического значения showModal. Мы вызываем render, чтобы вернуть компоненты, и оборачиваем возврат сокращением фрагмента, <> и </>. Это замена, а не упаковка компонентов в <React.Fragment>. Мы отображаем данные API в нашем браузере, вызывая формат this.state.nasaData.title.
На целевой странице приложения мы нажимаем кнопку, чтобы открыть модальное окно и вызвать прослушиватель событий и функцию с onClick={this.handleShow}. Когда статус showModal равен true, show={this.state.showModal} представляет модальное окно в браузере. Исходная целевая страница отображается, когда значение showModal равно false.
Создание модального функционального компонента с помощью крючков
В функциональном компоненте мы импортируем хуки useState и useEffect из React и несколько компонентов из React Bootstrap. Мы создаем переменную nasaData, обновляем значение с помощью setData и устанавливаем начальное состояние на пустой объект с помощью useState({ }). Мы также создаем showModal переменную, setModal функцию и useState(false) в качестве начального состояния.
Теперь мы получаем данные НАСА в ловушке useEffect и используем setData, чтобы назначить их nasaData. Мы показываем определенные фрагменты данных в нашем браузере, связывая формат nasaData.title. Чтобы просмотреть модальное окно, мы нажимаем кнопку вызова onClick={() => setModal(true)}. Это событие вызывает функцию setModal, обновляет значение showModal до true и отображает модальное окно с show={showModal}. Чтобы вернуться на целевую страницу, мы нажимаем x в правом верхнем углу модального окна или кнопку закрытия.
Модальная функциональность
Заключительные мысли - модальное сравнение
- Тернарные операторы трудно читать в компоненте класса, и их необходимо разбить на несколько строк.
- В функциональном компоненте с хуками мы можем обрабатывать события с помощью встроенных функций, не загромождая оператор return.
- Мы удаляем ненужные
this.state…цепочки в функциональном компоненте для отображения атрибутов данных в браузере.
Оба компонента обладают одинаковой функциональностью, но есть заметные преимущества в функциональном компоненте с хуками. В дополнение к трем пунктам, указанным выше, функциональный компонент на семь строк короче и более читабелен с меньшим количеством символов на строку кода. Посетите Документацию React, чтобы найти дополнительные примеры и продолжить изучение хуков!
