0x000 概述

不到必要不要在React中访问Dom，尝试使用React的思想去解决问题。当然，必要的时候还是可以的，比如某些依赖Dom的组件

0x001 时机

在React中，并不是任何时候都可以访问Dom的，需要讲究时机。因为React中的组件存在生命周期，必须要在Dom 挂载之后的生命周期才能访问到Dom，也就是componetnDidmount之后

• 栗子：

  PE="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="class App extends React.component { constructor() { super() console.LOG('constructor', document.getElementById('cool')) } componentDidMount() { console.log('componentDidMount', document.getElementById('cool')) } render() { return

  Dom

  } }" tITle="" data-original-title="复制">

  class App extends React.Component {
      constructor() {
          super()
          console.log('constructor', document.getElementById('cool'))
      }
  
      componentDidMount() {
          console.log('componentDidMount', document.getElementById('cool'))
      }
  
      render() {
          return <div id='cool'>
              Dom
          </div>
      }
  }

• 输出：

  

0x002 访问方式

• 传统方式
  传统方式就是上面栗子中那般，直接在componentDidMount之后使用传统方式访问

• refs
ref有两种方式

  • ref属性绑定变量，这种方式需要先调用React.createRef创建一个ref，然后在componentDidMount之后的生命周期中使用this.myRef.current来访问。

    .COMponent { constructor() { super() this.myRef = React.createRef(); } componentDidMount() { const node = this.myRef.current; console.log('componentDidMount',node) } render() { return

    Dom

    } }" title="" data-original-title="复制">

    class App extends React.Component {
        constructor() {
            super()
            this.myRef = React.createRef();
        }
    
        componentDidMount() {
            const node = this.myRef.current;
            console.log('componentDidMount',node)
        }
    
        render() {
            return <div ref= {this.myRef}>
                Dom
            </div>
        }
    }

    效果

    

  • 绑定函数，更简约一点，可以直接使用myRef访问

    class App extends React.Component {
        constructor() {
            super()
        }
    
        componentDidMount() {
            console.log('componentDidMount',this.myRef)
        }
    
        render() {
            return <div ref= {(e)=>this.myRef=e}>
                Dom
            </div>
        }
    }

    效果

    

0x003 总结

不到必要不要在React中访问Dom，尝试使用React的思想去解决问题。