React 獲取真實的DOM節點

獲取真實的DOM節點

組件並不是真實的 DOM 節點，而是存在於內存之中的一種數據結構，叫做虛擬 DOM （virtual DOM）。只有當它插入文檔以後，纔會變成真實的 DOM 。

有時需要從組件獲取真實 DOM 的節點，這時就要用到 ref 屬性。

var MyComponent = React.createClass({
   handleClick: function() {
     this.refs.myTextInput.focus();
   },
   render: function() {
     return (
     <div>
       <input type="text" ref="myTextInput" />
       <input type="button" value="Focus the text input" onClick={this.handleClick} />
     </div>
     );
   }
});

爲了獲取真是DOM節點，html元素必須有一個 ref 屬性，然後 this.refs.[refName] 就會返回這個真實的 DOM 節點。需要注意的是，由於 this.refs.[refName] 屬性獲取的是真實 DOM ，所以必須等到虛擬 DOM 插入文檔以後，才能使用這個屬性，否則會報錯。