React.js はコンポーネントの開始タグと終了タグの間のすべての子ノードを this.props.children という配列にセットする。
サンプルコード。
<!DOCTYPE html>
<html>
<head>
<title>React.js sample: this.props.children</title>
<meta charset="UTF-8">
<script src="https://fb.me/react-0.13.3.js"></script>
<script src="https://fb.me/JSXTransformer-0.13.3.js"></script>
</head>
<body>
<h1>React.js sample: this.props.children</h1>
<div id="example"></div>
<script type="text/jsx">
var Hoge = React.createClass({
render: function(){
// React.js は開始タグ <Hoge> と終了タグ </Hoge> の間のすべての子ノードを
// this.props.children という配列にセットする
return(
<div>
<div>{this.props.children}</div>
</div>
);
}
});
React.render(
<Hoge>ほげ</Hoge>,
document.getElementById("example")
);
</script>
</body>
</html>
参考図書『入門 React ―― コンポーネントベースのWebフロントエンド開発』
⇒ nilog: React.js は開始タグと終了タグの間のすべての子ノードを this.props.children という特別な配列にセットする。 入門 React ―― コンポーネントベースのWebフロントエンド開発 (2015-06-02)
公式ドキュメントを読んでみると、必ずしも配列であるわけじゃないみたいなので注意。
⇒ Type of the Children props | React
-
ref.
- React.js sample: this.props.children (Webブラウザでの確認用サンプルコード)
- 入門React (Developing a React Edge) (Book_Developing_a_React_Edge - MemoWiki)
- [ヅ] React.js でシンプルなサンプルを書いてみた (2015-02-16)
tags: react.js javascript
Posted by NI-Lab. (@nilab)