<%= react_component('CommentBox', data: [ {author: "Pete Hunt", text: "This is one comment"}, {author: "Jordan Walke", text: "This is *another* comment"} ] ) %>
var CommentBox = React.createClass({ render: function() { return ( <div className="commentBox"> <h1>Comments</h1> <CommentList data={this.props.data} /> <CommentForm /> </div> ); } }); var CommentList = React.createClass({ render: function() { var commentNodes = this.props.data.map(function (comment) { return ( <Comment author={comment.author}> {comment.text} </Comment> ); }); return ( <div className="commentList"> {commentNodes} </div> ); } });
ReactJSについて、{}でpropsやstateにアクセスできるのはわかったのですが、上記のコードについて疑問があり、質問させて頂きました。
<Comment author={comment.author}> {comment.text} </Comment>
この部分について、this.props.data.map(function (comment) {
でmapでcommentとしてdataの中身を変数で取り出しているのに、なぜ再度{comment.author}
とカッコでくくる必要があるのかわかりません。comment.author
ではなぜいけないのか。さらに、this.props.data.map
のthis.prpos.data
はなぜ{}で囲まなくて良いのか。
よろしくお願いします。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2016/02/21 06:59
2016/02/21 07:06
2016/02/21 10:20