大綱
存取 React 管理的 DOM 節點
開發 React 的過程中,我們要正常的存取由 React 管理的 DOM 時,首先呢 ~ 我們必須要先可以找到存取負責管理它們的元件。哪要怎麼做呢 ? 其實很簡單的,我們增加一個 ref 屬性稻子元件的身上,便能輕易的做到這件事。
其範例如下:
var DoodleArea = React.createClass({
render: function() {
return <canvas ref='mainCanvas' />;
}
});
這讓我們能夠透過 this.refs.main.Canvas
來存取 <canvas>
這個元件。我們可以想像一個畫面,就是給一個子元件的這個 ref 必須在同一個父元件的所有子元件之間是唯一的 ; 給另一個子元件一個也叫做 mainCanvas 的 ref 會無法正常運作。
如果條件允許了,我們能夠開始存取專案中的子元件,我們就可以借助該子元件的 getDOMNODE()
方法來存取其底層的 DOM 節點。