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

４）複数のコンポーネントを組み合わせる

次は複数のコンポーネントを組み合わせる場合について説明します。

まずは、下記のようにsrc/jsx/client.jsxを書き換えてください。

var React = require('react');
var MyButton = React.createClass({
  render: function() {
    var style = {
      "background": "#3498db",
      "background-image": "linear-gradient(to bottom, #3498db, #2980b9)",
      "border-radius": "28px",
      "font-family": "Arial",
      "color": "#ffffff",
      "padding": "10px 20px 10px 20px"
    };
    return <button style={style}>MyButton</button>;
  }
});
var HelloMessage = React.createClass({
  render: function() {
    return (
      <div>
        <MyButton/>
        <MyButton/>
      </div>
    );
  }
});
 
React.render(<HelloMessage/>, document.getElementById('react-container'));

MyButtonを定義し、HelloMessageで使用しています。MyButtonはstyleを設定したbuttonタグを描画するだけの単純なコンポーネントです。HelloMessageクラスでは作成したMyButtonをdivタグで包んで二つ作成しています。この状態でブラウザを見てみると、下記のようになっているはずです。

このように、自分で定義したコンポーネントもコンポーネントの内部で使用することができます。

配列を渡せばその中にあるインスタンスが全部描画されます。なお、変数をXMLの中で使用する場合には、{}で囲みます。

var HelloMessage = React.createClass({
  render: function() {
    var myButtonList = [];
    for (var i = 0; i < 10; i++) myButtonList.push(<MyButton/>);
    return (
      <div>
        {myButtonList}
      </div>
    );
  }
});

styleの設定について

MyButtonですでに例示していますが、React.jsでstyleを設定する場合には、styleをオブジェクトとして作成してXMLの属性として指定します。CSSを直接XMLに書くことはできませんので注意してください。