Question

我开发的React / Redux应用程序需要存在于iframe中。可以通过从内部发送消息来告知周围文档调整iframe的大小。我想在DOM改变的任何时候发送调整大小消息。

使用通用的MutationObserver会在更新DOM和调整iframe大小之间产生闪烁。

使用

设置应用程序

render(
  <Provider store={store}>
    ...
  </Provider>,
  document.querySelector("..."),
  resizeIframe
);

resizeIframe回调函数解决了初始渲染问题，但对子组件更新没有帮助。

如何在任何React（重新）渲染上触发resizeIframe？

编辑：我知道在每次渲染时调整大小都是低效的。但是，摆脱DOM调整大小和iframe调整大小之间的延迟似乎是一个更大的问题。

Answer 1

您可以使用 componentWillReceiveProps（）在道具/状态更改时执行任何操作。更多关于反应lifecycles

Answer 2

反应的一个基本思想是调用元素的render方法不一定会改变DOM。

因此，对每个组件的render方法进行响应并不是一个好主意。

您还写道：

我想在DOM更改时发送调整大小消息

这听起来不太好：对DOM的更改不一定会改变文档的大小。

您需要的是检测应用所在的iframe或应用的根元素的大小更改。一个好主意是使用一个完全符合这个目的的库：https://github.com/wnr/element-resize-detector

首先使用方便的listenTo方法：

import elementResizeDetectorMaker from 'element-resize-detector';

const erd = elementResizeDetectorMaker();
erd.listenTo(document.getElementById("test"), function(element) {
  resizeIframe(); // the function you implemented earlier
});

如何在任何（重新）渲染React / Redux应用程序后触发事件

2 个答案: