第2回 簡単なReact.jsの使い方 （5/8）

技術コラム

【第2回】簡単なReact.jsの使い方

OSS Radar Scope

５）propsとstate

コンポーネント間の値の受け渡しについて説明します。

描画のために利用するプロパティにはpropsとstateがあります。propsはXMLに定義された属性を格納する変数です。動作を確認するために、次のようにsrc/main/jsx/client.jsxを書き換えてください。

var React = require('react');
var HelloMessage = React.createClass({
  render: function() {
    return <div>Hello {this.props.name}</div>
  }
});
 
React.render(<HelloMessage name="Jiro"/>, document.getElementById('react-container'));

すると、ブラウザには次のように表示されます。

img/reactjs_props.png

HelloMessageのname属性がthis.props.nameで参照できていることが確認できます。

stateはpropsと同じようにthis.state.xxxxとしてアクセスすることができますが、用途が異なります。propsとstateは次のように使用する箇所を使い分けます。

props state
XMLに属性として渡されるプロパティを格納する 自分のコンポーネント内だけで完結する状態を格納する

stateの更新はsetStateメソッドで行います。更新された値を使用している子コンポーネントは自動的に再描画されます。例えば、ReactRadarScopeではMainコンポーネントがstateを使用しています。

<OssList products={this.props.products} dotPosition={this.props.dotPosition} yearMonth={this.props.yearMonth} selectedOssId={this.state.selectedOssId}/>