React提供的獲取DOM元素的方法有兩種，一是react-dom中的findDOMNode()，二是refs。

1、findDOMNode

findDOMNode通常用于React組件的引用，其語法如下：

import ReactDOM from 'react-dom';
ReactDOM.findDOMNode(ReactComponent);

當(dāng)組件被渲染到DOM中后，findDOMNode會返回該組件實(shí)例對應(yīng)的DOM節(jié)點(diǎn)。

示例：

componentDidMount(){
    const dom = ReactDOM.findDOMNode(this);
    // this為當(dāng)前組件的實(shí)例
}

render() {}

注：如果render()中返回null，那么findDOMNode()也返回null。findDOMNode只對已經(jīng)掛載的組件有效。

2、refs

refs多用于React組件內(nèi)子組件的引用。使用ref獲取DOM節(jié)點(diǎn)有兩種情況：

（1）子組件為原生DOM組件：獲取到的就是這個DOM節(jié)點(diǎn)。如下例，this.input就獲取到了當(dāng)前<input />節(jié)點(diǎn)。

<input ref={(ref)=>{this.myInput = ref}} />

通過this.myInput，我就可以對<input />進(jìn)行一系列操作，比如讓輸入框聚焦：

this.myInput.focus();

注：refs也支持字符串格式：

<input ref='myInput' />

通過this.refs.myInput獲取到節(jié)點(diǎn)。

（2）子組件為React組件，比如<MyInput/>：獲得的就是<MyInput/>的實(shí)例，因此就可以調(diào)用<MyInput/>的實(shí)例方法。
示例：

componentDidMount(){
    const myComp = this.refs.myComp;  // 獲取到的是<Comp />的實(shí)例myComp
    const dom = ReactDOM.findDOMNode(myComp);  // 獲取到實(shí)例對應(yīng)的DOM節(jié)點(diǎn)
}

render(){
    return (
        <div>
            <Comp ref='myComp' />
        </div>
    );
}

注：調(diào)用<Comp />實(shí)例方法的方式：this.refs.myComp.method()，但并不建議這種調(diào)用方式。