自适应React Playgrond：与iframe共享状态

Question

我希望iframe内外的React组件能够访问相同的状态。

作为示例，我希望面板调整iframe外部的状态，以便立即重新释放iframe内部的react组件。反之亦然，我希望对iframe中的组件所做的更改传播到iframe外部的设置面板。

我有什么选择？

（目的是建立一种方法来预览组件的响应方式，而iframe似乎是最可靠的选择？）

Answer 1

我认为像MOBX这样的简单应用程序状态管理将是您的理想解决方案。

您应该将要更改的共享变量保持为可观察的状态，组件将对其进行观察，这样，任何更改都会触发重新渲染。 而且，组件也可以更改此变量。

流程指南- 如果我正确理解你的想法， 您想从面板中更改组件的宽度或高度或任何其他属性，它将改变您的超棒游乐场中组件的大小吗？ 所以，在mobx的“方式”中 高度和宽度将作为可见值保存在“商店”中 面板和操场会观察它， 并且还可以调用一个操作来更改商店中的内容

The Mobx library

the best tutorial

Answer 2

请勿使用iframe，这将为您服务。 “您的组件”应该是其样式取决于其道具的外部组件。

simple play ground

如果您还希望将数据从组件驱动到面板，Mobx将最适合您。