如何正确获取React组件的位置、宽度及高度？

• 你直接在render方法中执行DOM查询，此时Space组件对应的DOM节点还未完成挂载渲染，document.getElementById找不到目标元素就会报错，而id为root的节点是页面初始化就预先定义在HTML中的，所以可以正常查询到。
• React不推荐直接使用document类API操作内部组件DOM，官方提供了ref机制来安全绑定和访问组件对应的真实DOM节点。

在类组件中通过createRef绑定目标节点，在componentDidMount生命周期（此时DOM已完成挂载）中读取尺寸信息存入state，再渲染到视图中。
修改后的Space组件代码如下：

class Space extends React.Component {
  constructor(props) {
    super(props);
    // 1. 创建ref实例
    this.spaceRef = React.createRef();
    // 2. 初始化state存储尺寸信息
    this.state = {
      spaceRect: {}
    };
  }

  componentDidMount() {
    // 3. DOM挂载完成后获取尺寸并存入state
    const rect = this.spaceRef.current.getBoundingClientRect();
    this.setState({
      spaceRect: rect
    });
  }

  render() {
    return (
      // 4. 给目标DOM绑定ref，注意React中要使用className代替class属性
      <div className="space" ref={this.spaceRef}>
        <h1>宽度：{this.state.spaceRect.width}</h1>
        <p>距离视口顶部高度：{this.state.spaceRect.top}</p>
        <p>总高度：{this.state.spaceRect.height}</p>
      </div>
    );
  }
}

• getBoundingClientRect()返回的对象包含你需要的所有信息：width（宽度）、height（高度）、top/left（相对于视口左上角的坐标）、x/y（和top/left等价）、bottom/right（相对于视口的底部/右侧坐标）。
• 如果组件尺寸会随交互更新，你可以在componentDidUpdate生命周期中重新执行尺寸获取逻辑，注意要对比前后尺寸差异再更新state，避免触发无限重渲染。
• 不要直接在render方法中读取ref的current值用于渲染，必须把需要渲染的尺寸信息存入state，保证渲染的值和DOM状态一致。

内容的提问来源于stack exchange，提问作者Apuji