React


DOM操作


8.1 DOM ノードへのアクセス

React によって管理された DOM ノードにアクセスするには まず、そのノードを表現するコンポーネントにアクセスする必要がある。

コンポーネントに ref属性をせっていする。

var DoodleArea = React.createClass({
  render: function(){
    return <canvas ref="mainCanvas"></canvas>
  }
});

<canvas>コンポーネントは、 DoodleAreaコンポーネントの中で this.refs.mainCanvas でアクセスできる

ref 属性は、コンポーネントのすべての子ノードの中でユニークでなくてはいけない

ref属性でコンポーネントを参照できるようなら次に React.findDOMNode()を呼び実際のDOMノードにアクセスできる

但し render メソッド内では DOMノードにはアクセスできない

var DoodleArea = React.createClass({
  render: function(){
    // まだ表示されていないのでエラーとなる
    React.findDOMNode(this);
    return <canvas ref="mainCanvas"></canvas>
  },
  componentDidMount: function(){
    var canvasNode = React.findDOMNode(this.refs.mainCanvas);
    // OK
  }
});

React.findDOMNode() は、イベントハンドラ内でも使用できる

var RichText = React.createClass({
  render: function(){
    return <div ref="editableDiv"
      contentEditable="true" onKeyDown={this.handleKeyDown}/>
  },
  handleKeyDown: function(){
    var editor = React.findDOMNode(this.refs.editableDiv);
    var html = editor.innerHTML;
    // 入力内容を取得
  }
});

8.2 React フレンドリーでないライブラリの使用