【发布时间】：2019-01-11 21:22:24
【问题描述】：
我希望 iframe 内部和外部的 React 组件访问相同的状态。
例如，我希望面板调整 iframe 外部的状态，该状态会立即重新呈现 iframe 内的反应组件。反之亦然，我希望 iframe 内的组件更改传播到 iframe 外的设置面板。
我有哪些选择？
（目的是构建一种方法来预览组件的响应行为，而 iframe 似乎是最可靠的选择？）
【问题讨论】：
【发布时间】：2019-01-11 21:22:24
【问题描述】：
我认为像 MOBX 这样简单的应用程序状态管理将是一个很好的解决方案。
您应该将要更改的共享变量保留为可观察的，并且组件将观察它，就像这样任何更改都会触发重新渲染。 此外，组件也可以更改此变量。
流程指南- 如果我正确理解你的想法， 您想从面板更改组件的宽度或高度或任何其他属性，它会更改您很棒的游乐场中的组件大小？ 所以，以 mobx 的“方式” 高度和宽度将作为可观察值保存在“商店”中 面板和操场会观察它， 并且还可以在商店中调用一个动作来改变
【讨论】：
-
但是商店中的状态如何从 iframe 共享到父级，反之亦然？
-
我不确定您为什么要使用 Iframe 而不是简单的 div 甚至是您可以实现的组件类，因为您希望对面板更改做出反应。现在你的 iframe 如何渲染你的内部组件？ iframe-
An inline frame is used to embed another document or web page within the current HTML document.这不是你的情况。 -
从这里给出更多的背景信息：“你想要渲染到 iFrame 的原因有很多，但主要的好处是样式封装。我们可以安全地为我们的组件设置样式，而不必担心样式继承或 CSS 特异性，反之亦然，不会影响父文档样式。超出本文主题的其他好处是保证绘制层和布局边界。基本上导致绘制和重排不会影响父文档，因为 iFrame 本质上是一个新窗口。” medium.com/@ryanseddon/…
-
@dani 所以你想构建一个在其他网站上使用的应用程序？如果您只是担心 CSS 名称冲突，那么使用 BEM 并在您的类名前加上应用特定的命名空间就足够了，getbem.com/introduction。
不要使用 iframe，这对你有用。 'your component' 应该是一个外部组件，它的样式取决于它的 props。
如果您还想将数据从组件驱动到面板，Mobx 将是您的最佳选择。
【讨论】：