在React类组件中使用ResizeObserver
在React类组件中使用ResizeObserver
提问于 2019-07-08 20:01:21
我在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 (
);
}
}理想情况下，我也不想包装RealComponent在一个div把它给我div一个id。有没有办法RealComponent直接？
我的目标是观察对RealComponent但是MyComponent也很好。我应该在somethingGoesHere老虎机？
编辑：
为了让一些东西正常工作，我咬紧牙关把一个div标记周围RealComponent。然后我给它一个id。并更改了observe呼叫：
resizeObserver.observe(document.getElementById("myDivTag"));但是，在运行这段代码时，我得到：
未捕获的TypeError: resizeObserver.observe不是一个函数
任何帮助都将不胜感激。
回答 2
Stack Overflow用户
回答已采纳
发布于 2019-07-08 20:58:22
编辑:Davidicus的答案更完整，先看看
ResizeObserver不能进入构造函数，因为在组件生命周期的那个时间点上并不存在div。
我不认为你可以绕过额外的div，因为不管怎样，react组件都会缩减为html元素。
将此代码放入componentDidMount中，它应该可以工作：
componentDidMount() {
const resizeObserver = new ResizeObserver((entries) => {
console.log("Hello World");
});
resizeObserver.observe(document.getElementById("myDivTag"));
}Stack Overflow用户
发布于 2020-02-28 20:41:17
ComponentDidMount将是设置观察者的最佳位置，但您也希望断开连接ComponentWillUnmount。
class MyComponent extends React.Component {
resizeObserver = null;
resizeElement = createRef();
componentDidMount() {
this.resizeObserver = new ResizeObserver((entries) => {
// do things
});
this.resizeObserver.observe(this.resizeElement.current);
}
componentWillUnmount() {
if (this.resizeObserver) {
this.resizeObserver.disconnect();
}
}
render() {
return (
...
);
}
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/56941843
复制相关文章
![[ 机器学习 ] 关于Jupyter Notebook中pytorch模块import失败的问题](https://ask.qcloudimg.com/article-cover-image/10393610/0tna908ubk.jpg)
点击加载更多
相似问题
运行带有Python3.10的单元格需要安装ipykernel
错误: ipykernel需要Python版本3.4或更高版本
运行具有Python3.9.5 64位的单元格需要安装ipykernel或需要更新
在“运行带有python 3.11的单元格需要ipykernel包”(在visio代码中)之后，"pip安装ipykernel升级“不起作用。
anaconda环境与ipykernel安装顺序
添加站长 进交流群
领取专属 10元无门槛券
AI混元助手 在线答疑
关注 腾讯云开发者公众号
洞察 腾讯核心技术
剖析业界实践案例
腾讯云开发者
