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

tags: react.js javascript

Posted by NI-Lab. (@nilab)