在做项目的过程中遇到一个问题，获取一个元素的高度的时候获取不到，具体代码如下
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的生命周期是在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>
<div id="toppoint">hello</div>
</div>
);
}
}
export default PunchCard;
