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

問(wèn)題描述

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

問(wèn)題出現(xiàn)的環(huán)境背景及自己嘗試過(guò)哪些方法

我嘗試使用ref，發(fā)現(xiàn)this.refs中為undefined.

相關(guān)代碼

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>