javascript - 在 React 类组件中使用 ResizeObserver

Question

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

理想情况下，我也不想换行 RealComponent在 div并给出 div一个 ID。有没有办法到RealComponent直接？

我的目标是观察 RealComponent 的任何调整大小变化但是MyComponent也很好。我应该在 somethingGoesHere 中放入什么插槽？

编辑:

为了让一些东西发挥作用，我硬着头皮包装了一个 div标签 RealComponent 。然后我给了它一个 id <div id="myDivTag">并更改了 observe调用:

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

但是，当运行这个时，我得到:

Uncaught TypeError: resizeObserver.observe is not a function

任何帮助将不胜感激。

Answer 1

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>
    );
  }
}