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

Question

我有一个类需要获取 DOM 元素的大小。它工作得很好，但是当我调整窗口大小时，它不会更新，直到我更改应用程序中的状态，强制重新渲染。我尝试将 this.forceUpdate 添加到 componentDidMount() 中的 'resize' 事件监听器，但它不起作用。也许我做错了什么？理想情况下，我希望避免使用 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>
    );
  }
}

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