componentDidMount中 document.getElementById('id')为null

Question

问题描述

componentDidMount中,document.getElementById('id')为null

问题出现的环境背景及自己尝试过哪些方法

我尝试使用ref，发现this.refs中为undefined.

相关代码

componentDidMount() {
    const fullscreenBtn = document.getElementById('button');
    if (fullscreenBtn) {
      fullscreenBtn.addEventListener('click', () => {
        if (fullscreenBtn.requestFullscreen) {
          fullscreenBtn.requestFullscreen();
        } else if ( document.getElementById('video').msRequestFullscreen) {
          fullscreenBtn.msRequestFullscreen();
        } else if ( document.getElementById('video').mozRequestFullScreen) {
          fullscreenBtn.mozRequestFullScreen();
        } else if ( document.getElementById('video').webkitRequestFullscreen) {
          document.getElementById('video').webkitRequestFullscreen();
        }
      });  
}
}
<div 
  className = "play_img" 
  id='button'
  ref='button' 
  ref={(ref) => this.button = ref}
  onClick={handleClick}>
  <img src={require('./assets/play.png')}  />
</div> 

Answer 1

不要在react中操作dom节点。不要在react中操作dom节点。不要在react中操作dom节点。
你记住这句话，就没有你说的问题了。

Answer 2

onClick事件写在属性上，找元素用e.target

Answer 3

想在componentDidMount通过refs操作真实dom，只需要把获取refs的代码写在setTimeout中，比如：

setTimeout(() => {
    console.log(this.refs.xxx);
});