React - 在窗口调整大小后获取 element.getBoundingClientRect()

Question

我有一个需要获取 DOM 元素大小的类。它运行良好，但是当我调整窗口大小时，它不会更新，直到我更改应用程序中的状态，强制重新渲染。我已经尝试添加this.forceUpdate一个'resize'事件监听器componentDidMount()，但没有奏效。也许我做错了什么？理想情况下，我this.forceUpdate无论如何都想避免使用性能影响。任何解决方法？提前致谢！

我的代码：

class MyComponent extends React.Component {
  state = { x: 0, y: 0 }

  refCallback = (element) => {
    if (!element) {
      return
    }
    const { x, y } = element.getBoundingClientRect()
    this.setState({ x, y })
  }

  render() {
    console.log('STATE:', this.state) // Outputs the correct x and y values.
    return (
      <div ref={this.refCallback}>
        <button>Hello world</button>
      </div>
    )
  }
}

Answer 1

如果您想在窗口调整大小时测量组件中的某些元素，它将看起来像这样：

class MyComponent extends React.Component {
  state = {
    x: 0,
    y: 0,
  };

  element = React.createRef();

  onWindowResize = () => {
    if (this.element.current) {
      const {x, y} = this.element.current.getBoundingClientRect();
      this.setState({x, y}, () => {
        console.log(this.state);
      });
    }
  };

  componentDidMount() {
    window.addEventListener('resize', this.onWindowResize);
  }

  componentWillUnmount() {
    window.removeEventListener('resize', this.onWindowResize);
  }

  render() {
    return (
      <div ref={this.element}>
        <button>Hello, World</button>
      </div>
    );
  }
}

这里的技巧是你的ref回调只被调用一次，当元素最初被添加到 DOM 时。如果您想在调整窗口大小时更新状态，您将需要一个'resize'事件处理程序。