使用Ref进行DOM操作

原因 React.js 并不能完全满足所有 DOM 操作需求,有些时候我们还是需要和 DOM 打交道。比如说想动态获取某个 DOM 元素的尺寸来做后续的动画等。
使用方法

class AutoFocusInput extends Component { componentDidMount () { this.input.focus() }render () { return ( this.input = input} /> ) } }ReactDOM.render( , document.getElementById('root') )

可以看到给 input 元素加了一个 ref 属性,这个属性值是一个函数。当 input 元素在页面上挂载完成以后,React.js 就会调用这个函数,并且把这个挂载以后的 DOM 节点传给这个函数
使用原则 【使用Ref进行DOM操作】能不用 ref 就不用

    推荐阅读