Здравствуйте. Решил я на досуге освоить React (до этого был Angular, ExtJS, backbone и куча другой мелочевки), но постоянно натыкаю на какие-то, как мне кажется, сомнительные решения. Ну например, нужно написать универсальный Popup (плавающий компонент при открытии которого закрываются другие плавающие компоненты) и использовать его для написания других компонентов (ContextMenu, Dropdown, Window, Overlay и т.д.). Как было раньше:
- Есть компоненты Popup и Controller.
- При открытии Popup-а он собщает Controller-у "Хей! Я открылся!"
- Controller закрывает другие, уже открытые Popup-ы.
Один раз написали и больше никогда об этом контроллере не вспоминаем. Можно вообще не знать о его существовании. Как в React-е сделать что-нибудь похожее?
rgs350, храните в стейте состояние всех 10 и если открыто окно и вы хотите открыть еще одно то сделайте состояние всех окон закрытыми и потом только открывайте нужное. Не нужно хранить в стейте окно1 окно2 используйте массив или обьект лучше ключ которого будет id нужного окна.
Роман Александрович,
Ну оно только на словах выглядит нормально ибо:
- придумывать ключи для каждого всплывающего окна, так себе идея.
- предположим, что каждый popup знает о состоянии остальных и при открытии закрывает их, вызывая setState открытых popup-ов. И тут у нас появляется Dropdown, который сам по себе должен иметь стейт, так как без него мы не узнаем открывать или закрывать меню (дальше и так понятно что произойдет).
В общем пример бы где-нибудь посмотреть.
Проект на чистом реакте обычно разделяется на компоненты и чтоб установить связь между ними вам придется в головном компоненте определять всё через портал (да через так круто делать все всплывашки) и внутри него уже подменять нужный контент.
Таким образом у вас будет одна универсальная всплывашка на все случии жизни.
Но я бы подключил redux и уже исходя из глобального состояния без прокидывания миллионов пропсов делал всплывашку, как вам описали в коммантариях
rgs350, я предложил выше тот, который бы не зависел от него.
Можно несколько разных сделать на чистом реакте, это самый простой способ.
Можно один универсальный, как я описал, через реакт или с использованием redux
Простой
