2016/7/29 コード中のコメントとdivタグのclassNameの書き方が間違えていたので修正しました。
2016/9/17 関連記事情報を追加しました。
続いて変数の扱いについて少し説明したいと思います。
1. React.createClassでの変数
例えば、下記のようなコードを書いたとしましょう。
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"になっていますね。変数を定義して共通化したいと思います。以下のコードになります。
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 の外に定義した変数はどうやって取り扱うのでしょうか。
2. Props
いきなり答えから書きます。下記コードを見てください。
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を配列で定義しているのに、ほぼべた書きに近い記述になってしまっていますね。次章ではループ文の扱いについて説明していきたいと思います。
3. 引用
4. 関連記事
cloud9環境でReactの検証① -導入-
cloud9環境でReactの検証② -コンポーネント-
cloud9環境でReactの検証④ -ループ-
cloud9環境でReactの検証⑤ -Ajax、state管理-