我正在使用Chrome浏览器上的React 15,并想连接一个事件监听器以检测父容器的变化。在寻找选项后,我发现了ResizeObserver,但不确定如何在我的项目中让它工作。
目前,我将其放在构造函数中,但似乎没有打印任何文本,而且我不知道在observe
调用中放什么。
class MyComponent extends React.Component {
constructor(props) {
super(props);
const resizeObserver = new ResizeObserver((entries) => {
console.log("Hello World");
});
resizeObserver.observe(somethingGoesHere);
}
render() {
return (
<AnotherComponent>
<YetAnotherComponent>
</YetAnotherComponent>
<CanYouBelieveIt>
</CanYouBelieveIt>
<RealComponent />
</AnotherComponent>
);
}
}
理想情况下,我也不想用 div
包装 RealComponent
并给该 div
设置 id。有没有直接针对 RealComponent
的方法?我的目标是观察
RealComponent
的任何调整大小变化,但 MyComponent
也可以。在 somethingGoesHere
插槽中应该放什么?编辑:
为了让某些东西起作用,我咬紧牙关并在
RealComponent
周围包装了一个 div
标签。然后我给它一个 id <div id="myDivTag">
并更改了 observe
调用:resizeObserver.observe(document.getElementById("myDivTag"));
然而,运行此代码时,我遇到了以下问题:
Uncaught TypeError: resizeObserver.observe不是一个函数
任何帮助将不胜感激。