На третий день челленджа 100 Days of Coding я заканчиваю изучение React Hooks созданием собственного хука. Пользовательский хук позволяет вам создать модульный компонент, который вы можете повторно использовать так же, как используются хуки useState и use Effect. Мне удалось найти отличный учебник от программиста Джеймса Кинга, который отлично объяснил, как создать модальное окно с помощью пользовательского хука. Вы можете проверить это по этой ссылке, если хотите получить полное объяснение:
https://upmostly.com/tutorials/modal-components-react-custom-hooks
Короче говоря, необходимо создать два компонента, чтобы этот модальный пользовательский хук работал. Сначала я создал сам хук со следующим кодом:
import { useState } from ‘react’;
const useModal = () => {
const [isShowing, setIsShowing] = useState(false);
function toggle() {
setIsShowing(!isShowing)
}
return {
isShowing,
toggle
}
};
export default useModal;
Этот пользовательский хук использует useState для включения или выключения модального окна. Поскольку этот компонент является модальным, вы можете использовать его с любым модальным окном, которое есть на вашем сайте. Это, безусловно, гораздо более простой способ создания модальных окон, чем все, с чем я сталкивался до сих пор.
Затем мне нужно было создать сам модальный компонент, который будет отображаться при нажатии определенной кнопки. Наконец, мне нужно было подключить эти компоненты к предыдущему компоненту счетчика, над которым я работал последние пару дней. Следующий код использует пользовательский хук для настройки:
const {isShowing, toggle} = useModal();
Этот код вызывает модальный компонент и использует настраиваемый хук для активации модального окна.
<Modal
isShowing={isShowing}
hide={toggle}
/>
Все, что осталось сделать, это стилизовать модальный компонент так, чтобы он работал как модальный.
Благодаря этому замечательному руководству Джеймса Кинга я также смог понять, как использовать React.Fragment, а также ReactDOM.createPortal. Они обязательно пригодятся при работе с Хуками в будущем.
Я считаю, что это завершит мое исследование React Hooks на данный момент. Я чувствую, что теперь хорошо понимаю, как их использовать, и готов двигаться дальше. Если вы хотите проверить код, который я создал во время этого небольшого исследования, вы можете посетить этот репозиторий, в котором содержится гораздо больше информации:
