ギャンブルベット 第2回 簡単なReact.jsの使い方 （5/8）

５）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'));

ギャンブルベットと、ブラウザには次のように表示されます。

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

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

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

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