react结合js获取元素的高度

 var box=document.getElementById("toppoint");
        console.log(box);
        console.log(box.offsetHeight);
class PunchCard extends Component{
render() {
    return (
       <div className="point A" id="toppoint"></div> 
export default PunchCard;
如上所示我是放在组件外定义的变量，然后打印的时候发现box是undefined

后来查了一下才知道:
react的生命周期是在componentDidMount这个生命周期才会获取到真正的dom,所以第一次渲染的时候获取不到dom自然document.getElementById也取不到元素，解决办法是放componentDidMount中。
正确代码如下：
class PunchCard extends Component{
    componentDidMount(){
        var box=document.getElementById("toppoint");
        if(box){ //此处在加一层判断，更加严密，如果box存在的情况下获取
            console.log(box.offsetHeight);
render() {
    return (
       <div id="toppoint">hello</div> 
export default PunchCard;