react结合js获取元素的高度

在做项目的过程中遇到一个问题，获取一个元素的高度的时候获取不到，具体代码如下

 var box=document.getElementById("toppoint");
        console.log(box);
        console.log(box.offsetHeight);
class PunchCard extends Component{
render() {
    return (
      <div>
       <div className="point A" id="toppoint"></div> 
      </div>
    );
  }
}
export default PunchCard;

如上所示我是放在组件外定义的变量，然后打印的时候发现box是undefined
后来查了一下才知道:

react的生命周期是在componentWillMount这个生命周期才会获取到真正的dom,所以第一次渲染的时候获取不到dom自然document.getElementById也取不到元素，解决办法是放componentWillMount中。

正确代码如下：

class PunchCard extends Component{
    componentDidMount(){
        var box=document.getElementById("toppoint");
        if(box){ //此处在加一层判断，更加严密，如果box存在的情况下获取
            console.log(box.offsetHeight);
        }
        
    }    
render() {
    return (
      <div>
       <div id="toppoint">hello</div> 
      </div>
    );
  }
}
export default PunchCard;