1

我正在尝试使用 React 并重新渲染 iframe，但我不确定 React 如何正确重新渲染 iframe，尤其是指向文本编辑器的 iframe。这是一个显示此内容的 jsFiddle：

https://jsfiddle.net/augburto/fkqnm329/2/

我指向的文本编辑器并不重要，但我正在做的是当您单击 Trigger Update 时，它​​会调用 a setInterval，它将不断设置新状态并因此触发重新渲染。

我认为可能发生的情况是，当我输入iframewhich has atextarea时，它将不可避免地重新呈现，从而使我失去文本编辑器的位置，但不知何故，尽管看到重新呈现在console.log. 请注意，我并不是建议它应该这样做——我只是想知道为什么它不这样做。我知道React 内部做了一些聪明的事情，比如事务，但我不希望它保持我的光标位置或我选择的内容。

那么 React 如何更具体地处理重新渲染 iframe呢？我读过文章（即this和this，但我觉得它们并没有对它有很多启发）。它与常规的 DOM 元素有什么不同吗？

4

1 回答 1

1

好吧，过了一段时间，我想我相信我找到了答案。一般来说，因为 React 只是创建一个虚拟 DOM 并在幕后进行差异化，它实际上只查看 iframe 元素而不是生成的内容。这是一个完全独立的事情，iframe 创建自己的浏览上下文。阅读iframe 上的 MDN 文档非常有用：

HTML 元素表示嵌套的浏览上下文，有效地将另一个 HTML 页面嵌入到当前页面中。在 HTML 4.01 中，文档可能包含头部和正文或头部和框架集，但不能同时包含正文和框架集。但是，可以在普通文档正文中使用 an。每个浏览上下文都有自己的会话历史和活动文档。包含嵌入内容的浏览上下文称为父浏览上下文。顶级浏览上下文（没有父级）通常是浏览器窗口。

我认为 React 在解析时确实做了一些特殊的事情，iframe但总的来说它并没有太大的偏差。

另外，我认为可能提供信息的是 React 通常如何处理输入元素——请看一下Forms 的Controlled Components，因为 React 有一种完全独立且特殊的方式来处理这些情况。

于 2017-07-13T21:00:58.370 回答