Javascript 在React类组件中使用ResizeObserver

我正在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>
        );
    }
}

但是，运行此命令时，我会得到：

未捕获类型错误：resizeObserver.observe不是函数

---

任何帮助都将不胜感激。

编辑：大卫狄克斯下面的答案更完整，请先看那里

ResizeObserver无法进入构造函数，因为该div在组件生命周期的该点不存在

我认为您无法绕过额外的div，因为react组件无论如何都会减少为html元素

将其放入componentDidMount，它应该可以工作：

componentDidMount() {
   const resizeObserver = new ResizeObserver((entries) => {
        console.log("Hello World");
   });

   resizeObserver.observe(document.getElementById("myDivTag"));
}

---

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 (
      <div ref={this.resizeElement}>
        ...
      </div>
    );
  }
}

类MyComponent扩展了React.Component{ resizeObserver=null； resizeElement=createRef（）； componentDidMount（）{ this.resizeObserver=新的resizeObserver（（条目）=>{ //做事 }); this.resizeObserver.observe（this.resizeElement.current）； } 组件将卸载（）{ 如果（此.resizeObserver）{ this.resizeObserver.disconnect（）； } } render（）{ 返回( ... ); } }

---

我最近也遇到了类似的问题，不同之处在于我的应用程序主要使用挂钩和功能组件

以下是如何在React功能组件（在typescript中）中使用ResizeObserver的示例：

const resizeObserver=React.useRef（新resizeObserver（（条目：ResizeObserverEntry[]）=>{
//处理大小更改的代码
}));
const resizedContainerRef=React.useCallback（（容器：htmldevelment）=>{
if（容器！==null）{
resizeObserver.current.observe（容器）；
}
//当卸载元素时，将使用null参数调用ref回调
//=>清理观察者的最佳时间
否则{
if（resizeObserver.current）
resizeObserver.current.disconnect（）；
}
}，[resizeObserver.current]）；
返回
//您的组件内容在这里
;

在这样的组件中创建实例是一种好的做法吗？太棒了。。。非常感谢。

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 (
      <div ref={this.resizeElement}>
        ...
      </div>
    );
  }
}

const resizeObserver = React.useRef<ResizeObserver>(new ResizeObserver((entries:ResizeObserverEntry[]) => {
    // your code to handle the size change
}));

const resizedContainerRef = React.useCallback((container: HTMLDivElement) => {
    if (container !== null) {
        resizeObserver.current.observe(container);
    }
    // When element is unmounted, ref callback is called with a null argument
    // => best time to cleanup the observer
    else {
        if (resizeObserver.current)
            resizeObserver.current.disconnect();
    }
}, [resizeObserver.current]);

return <div ref={resizedContainerRef}>
    // Your component content here
</div>;