Responsive React Playgrond: поделиться состоянием с iframe

Question

Я хочу, чтобы компоненты React внутри и снаружи iframe имели доступ к одному и тому же состоянию.

В качестве примера я хочу, чтобы Panel корректировала состояние за пределами iframe, которое немедленно перерисовывает реагирующий компонент внутри iframe. И наоборот, я хочу, чтобы изменения внутри компонента iframe распространялись на панель настроек за пределами iframe.

Какие у меня варианты?

(Цель состоит в том, чтобы создать способ предварительного просмотра того, как компонент ведет себя отзывчиво, и iframe представляется наиболее надежным вариантом?)

Answer 1

не используйте Iframe, это будет работать для вас. 'ваш компонент' должен быть внешним компонентом, стиль которого зависит от его свойств.

простая игровая площадка

если вы также хотите выводить данные с компонента на панель, Mobx подойдет вам лучше всего.

Answer 2

Я думаю, что простое управление состоянием приложений, такое как MOBX, будет для вас хорошим решением.

вы должны оставить переменные общего доступа, которые вы хотите изменить, как наблюдаемые, и компоненты будут наблюдать это, как это любое изменение вызовет повторное рендеринг. также компоненты смогут изменять и эту переменную.

руководство по процессу- если я правильно понимаю вашу идею, Вы хотите изменить ширину или высоту или любое другое свойство компонента на панели, и это изменит размер компонента на вашей удивительной игровой площадке? Итак, в MOBX "путь" Высота и ширина будут сохранены в «магазине» как наблюдаемые и панель и детская площадка будут наблюдать это, а также сможете вызвать действие для изменения в магазине

Библиотека Mobx

лучший учебник