iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 25
1

大綱

  • 存取 React 管理的 DOM 節點

存取 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 節點。


上一篇
[Day24] React - Mixin
下一篇
[Day26] React - 表單 (上)
系列文
好 Js 不學嗎 !? JavaScript 入門中的入門。30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言