cloud9環境でReactの検証③ -変数の扱い-

2016/7/29 コード中のコメントとdivタグのclassNameの書き方が間違えていたので修正しました。
2016/9/17 関連記事情報を追加しました。

続いて変数の扱いについて少し説明したいと思います。

1. React.createClassでの変数

---

例えば、下記のようなコードを書いたとしましょう。

app.js

import React from "react";
import ReactDOM from "react-dom";

var UserBox = React.createClass({
    render: function(){
        return (
            <div className="userBox">
                <ul>
                    <li>No: 1</li>
                    <li>Name: Taro</li>
                    <li>Message: Hello</li>
                    <li>Age: 25</li>
                </ul>
                <ul>
                    <li>No: 2</li>
                    <li>Name: Jiro</li>
                    <li>Message: Good Bye</li>
                    <li>Age: 25</li>
                </ul>
                <ul>
                    <li>No: 3</li>
                    <li>Name: Kumi</li>
                    <li>Message: Thank you</li>
                    <li>Age: 25</li>
                </ul>
            </div>
        );
    }
});

// id='content'に<UserBox />を埋め込む
ReactDOM.render(
    <UserBox />,
    document.getElementById('content')
);

ページは下図のように表示されます。

まあなんの変哲もない普通のページです（稚拙なhtmlを除いて）。
「Age」部分が全て"25"になっていますね。変数を定義して共通化したいと思います。以下のコードになります。

app.js

import React from "react";
import ReactDOM from "react-dom";

var UserBox = React.createClass({
    render: function(){
        var age = 25;
        return (
            <div className="userBox">
                <ul>
                    <li>No: 1</li>
                    <li>Name: Taro</li>
                    <li>Message: Hello</li>
                    <li>Age: {age}</li>
                </ul>
                <ul>
                    <li>No: 2</li>
                    <li>Name: Jiro</li>
                    <li>Message: Good Bye</li>
                    <li>Age: {age}</li>
                </ul>
                <ul>
                    <li>No: 3</li>
                    <li>Name: Kumi</li>
                    <li>Message: Thank you</li>
                    <li>Age: {age}</li>
                </ul>
            </div>
        );
    }
});

// id='content'に<UserBox />を埋め込む
ReactDOM.render(
    <UserBox />,
    document.getElementById('content')
);

React.createClass 内にvar age = 25; で定義しておくと、render内で{age} と記載することで使用可能です。
では、React.createClass の外に定義した変数はどうやって取り扱うのでしょうか。

1. Props

---

いきなり答えから書きます。下記コードを見てください。

app.js

import React from "react";
import ReactDOM from "react-dom";

var input_data = [
        {no:1, name:"Taro", message:"Hello"},
        {no:2, name:"Jiro", message:"Good Bye"},
        {no:3, name:"Kumi", message:"Thank you"}
];

var UserBox = React.createClass({
    render: function(){
        var age = 25;
        return (
            <div className="userBox">
                <ul>
                    <li>No: {this.props.user[0]["no"]}</li>
                    <li>Name: {this.props.user[0]["name"]}</li>
                    <li>Message: {this.props.user[0]["message"]}</li>
                    <li>Age: {age}</li>
                </ul>
                <ul>
                    <li>No: {this.props.user[1]["no"]}</li>
                    <li>Name: {this.props.user[1]["name"]}</li>
                    <li>Message: {this.props.user[1]["message"]}</li>
                    <li>Age: {age}</li>
                </ul>
                <ul>
                    <li>No: {this.props.user[2]["no"]}</li>
                    <li>Name: {this.props.user[2]["name"]}</li>
                    <li>Message: {this.props.user[2]["message"]}</li>
                    <li>Age: {age}</li>
                </ul>
            </div>
        );
    }
});

// id='content'に<UserBox />を埋め込む
ReactDOM.render(
    <UserBox user={input_data} />,
    document.getElementById('content')
);

Reactでは親のコンポーネントから子のコンポーネントに値を渡すことが可能です。
子のコンポーネントに値を渡しているコードは下記となります。
input_data をuser という名前で子コンポーネントに渡しています。

<UserBox user={input_data} />,

受け取った値は{this.props} と記述することで、子コンポーネントで取り扱うことが可能となります。例ではuserという名前で渡しているため、this.props.user で取り扱いが可能です。

変数の取り扱いについては以上となります。

それにしてもせっかくinput_dataを配列で定義しているのに、ほぼべた書きに近い記述になってしまっていますね。次章ではループ文の扱いについて説明していきたいと思います。

1. 引用

---

React チュートリアル

1. 関連記事

---

cloud9環境でReactの検証① -導入-
cloud9環境でReactの検証② -コンポーネント-
cloud9環境でReactの検証④ -ループ-
cloud9環境でReactの検証⑤ -Ajax、state管理-