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 插入文檔以後，才能使用這個屬性，否則會報錯。