/
drndsv
/
react
Обзор
Документация
Войти
/
drndsv
/
react
Код
Запросы
0
Задачи
Вики
Пакеты
0
Релизы
0
CI/CD
Аналитика
Безопасность
master
src/components/Modal/Modal.jsx
29 строк
1 KB
drndsv
Добавили модальное окно
28 апр 2025, 15:37
28 апр 2025, 15:37
4846a61
Код
Авторство
О чём код?
import { createPortal } from "react-dom"; import { useRef, useEffect } from "react"; import "./Modal.css"; export default function Modal({ children, open }) { // return <dialog open={open}>{children}</dialog>; const dialog = useRef(); // useEffect принимает в себя два параметра: // 1) callback (функция) - которая будет выполняться, когда выполнится сам эффект, // 2) массив зависимостей (от чего зависит эффект) // useEffect начинает работать не в момент когда react прочитал компонент и начал что-то выполнять, а // он спера зарегестрировал эту задачу, выполняет там свои действия // и как только все завершилось, он все зарендерил, все закончил // тогда он начинает делать сови эффекты // в зависимостях (массиве) мы указывае те состояния, которые являются реактивными // которые влияют на перерисовку компонентов useEffect(() => { if (open) { dialog.current.showModal(); } else { dialog.current.close(); } }, [open]); return createPortal( <dialog ref={dialog}>{children}</dialog>, document.getElementById("modal") ); }