Измените состояние приложения реакции через API того же приложения

Question

Я работаю над огромным проектом, в котором функции разделены на отдельный проект React.

Рассмотрим следующий сценарий

Здесь BaseReactApp это приложение-оболочка, в котором будут объединены все куски. Теперь моя проблема в том, что я хочу взаимодействовать с состоянием ReactApp1 (отображается в iframe - синяя область) с помощью кнопок, показанных под iframe.

Я думаю о сценарии, при нажатии на Button1, какой-то API взаимодействует с ReactApp1 и изменяет состояние приложения, которое там отображается. Но я не уверен, сработает это или нет.

Я пытался проложить маршрут в ReactApp1, чтобы изменить состояние приложения и попасть по этому URL-адресу через Button1, но он не работает. Полагаю, из-за проблемы контекста ...

Пожалуйста, дайте мне знать, как я могу этого добиться.

PS - ReactApp1 - это чисто проект реагирования. В большинстве случаев он будет размещен в другом месте.

Answer 1

Если все URL-адреса ваших разных модулей расположены в одних и тех же доменах, вы можете использовать структуру управления состоянием (например, redux , mobX , diox , ...) и заставьте его взаимодействовать между вашими iframe, используя свойства window.parent (iframe to parent) и iframe.contentWindow (родительский для iframe) для доступа к вашему магазину глобально.

Answer 2

Таким образом, у вас либо есть общее состояние, которое будет жить в BaseReactApp и подключать к нему все остальные компоненты, либо вы можете общаться с iframe через обмен сообщениями между документами