У меня есть веб-приложение в React, в котором есть несколько компонентов реагирования, используемых для визуализации различных представлений. Для конкретного варианта использования серверная часть передает действие в слой пользовательского интерфейса, и для этого конкретного действия представление должно отображаться в модальном режиме.
В модале имеется несколько кнопок при нажатии кнопки что, мы должны отобразить на существующий реактивный компонент только внутри этого модала.
Так что, в основном, до тех пор, пока кто-то не закроет модал, все дальнейшие экраны при нажатии на кнопки в этом должны быть показаны внутри модала.
Приложение использует React, Redux и Epics. Различные URL не включены для компонента. Я относительно новичок в реакции, поэтому не совсем понимаю концепции маршрутизации.
Вопрос: Как я могу смоделировать это таким образом, чтобы обеспечить лучший пользовательский опыт, поддерживать и разрешить повторное использование существующие компоненты.
Подходы, которые я подумал:
- Создайте отдельные компоненты для каждого существующего, который обернет существующий компонент вокруг Modal. Например, у меня есть компонент A, поэтому я создаю другой компонент AModal, который внутренне ссылается на A внутри тегов. При каждом нажатии кнопки в исходном модале я закрываю этот модальный фон и открываю соответствующий модальный компонент, в примере выше AModal.
Проблемы: это приведет к смутному восприятию, так как будут видны закрытие и открытие модалов. Также, в зависимости от модальных размеров для каждого отдельного компонента, опыт может быть еще более ухудшен.
Создайте WflowContainerComponent, который использует все оригинальные компоненты внутри него. Таким образом, модальность и высота / ширина определяются внешним компонентом, и вид внутри него изменяется в соответствии с требованиями и состояниями реакции / избыточности.
Проблемы: при каждой добавленной функциональности (то есть при нажатии кнопки на оригинале WflowContainerComponent) должен включать в себя каждый отдельный компонент. И если каждому отдельному компоненту требуются определенные входные данные из состояния, тогда список реквизитов WflowContainerComponent будет продолжать выходить за пределы контроля.
Есть ли лучший способ, при котором я могу просто дать знать, что реагирует на каждый из них следующий компонент только на модале.