Задать вопрос
@rgs350
react

Модальные окна. Куда и как рендерить?

Здравствуйте. Есть модальное окно (ну например с информацией о товаре) + несколько элементов управления (кнопки), при нажатии на которые должно отображаться это модальной окно. Куда рендерить модальное окно?
1. В каждой кнопке писать {this.state.isShowModal && <Modal/>}, но как-то глупо хардкодить его в каждом элементе управления.
2. Тоже самое в App, но тогда при открытии каждого окна будет реконсилироваться всё приложение.
  • Вопрос задан
  • 1222 просмотра
Комментировать
Подписаться 1 Простой Комментировать
Решения вопроса 1
@davidnum95
Рендерить можно через портал в корне приложения, управлять состоянием через контекст. Получится что то типа:
<ModalContext.Consumer>
    {(showModal) => <button onClick={() => showModal(modalProps)}>Open Modal</button>}
</ModalContext.Consumer>
Ответ написан
Комментировать
Комментировать
Пригласить эксперта
Ответы на вопрос 2
Heian
@Heian
Ашот
Модальные окна необязательно должны отдавать в render что-то, кроме как null, когда они "закрыты". Поэтому рендерьте окна ближе к корню DOM-дерева приложения, они будут рендериться, но в render будет null, если isShowModal = false.
Ответ написан
3 комментария
3 комментария
@forspamonly2
как раз для этого в реакте теперь есть порталы:
https://reactjs.org/docs/portals.html
Ответ написан
Комментировать
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
React разработчик
Uptrade
от 150 000 до 200 000 ₽
JS|React Native разработчик
Венста • Киров
от 60 000 до 120 000 ₽
Senior React Developer
DARS • Москва
от 200 000 до 300 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
8266 f12 требуется сделать ревью и оптимизировать работу
26 апр. 2024, в 20:42
2000 руб./за проект
Доработать и интегрировать модуль на WordPress
26 апр. 2024, в 19:53
5000 руб./за проект
Разработать Telegram mini app
15 апр. 2024, в 22:14
30000 руб./за проект
Ещё заказы