在 React class 组件中使用 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 插槽中放入什么？

编辑：

为了让某些东西起作用，我硬着头皮在 RealComponent 周围包裹了一个 div 标签。然后我给它一个 id <div id="myDivTag"> 并更改了 observe 调用：

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

然而，当运行这个时，我得到：

Uncaught TypeError: resizeObserver.observe is not a function

如有任何帮助，我们将不胜感激。

Answer 1

编辑：下面 Davidicus 的回答更完整，先看那里

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

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

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

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

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

Answer 2

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

Answer 3

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

这里是一个如何在 React 功能组件中使用 ResizeObserver 的例子（打字稿）：

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

在 React class 组件中使用 ResizeObserver

Using ResizeObserver in React class component

javascript

dom

resize

reactjs