React tutorial1-7

子コンポーネントを配列化してレンダー

by catfood

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.8/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.8/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<div id="content"></div>
<script type="text/babel">
var Comment = React.createClass({
	render(){
  	return <p>{this.props.name}</p>
  }
});
var CommentBox = React.createClass({
	render(){
  	let comments = [
    	<Comment name="fuga" />,
      <Comment name="hoge" />
    ]
    return (
      <div>
        {comments}
      </div>
    );
  }
});
ReactDOM.render(
  <CommentBox/>,
  document.getElementById('content')
);
</script>