获取React组件的DOM

807 阅读1分钟

React组件在渲染时会挂载到DOM上,所以它会有真实的DOM结构,为什么需要它的DOM结构呢,以后你肯定会需要的:)

render () {
  return (
    <div className="container" ref={(e) => {this.instence = e;}}></div>
  )
}

这样在渲染后就把这个组件的DOM结构获取到this.instence属性上了,注意因为是渲染后,所以在componentWillMount () 中是获取不到DOM的:

componentWillMount () {
  console.log(this.instance); // undefined
}

要在挂载后获取到:

componentDidMount () {
  console.log(this.instance); // <div>...</div>
  console.log(this.instance.className); // container
}

睡觉啦,收工:)