Question

我正在寻找关于如何使用react构建评论框的reactjs教程。我得知我们正在映射数据，但我无法理解这种语法和部分代码。如果您能够准确地解释这里发生了什么，将会非常有用。具体来说，为什么在comments元素标签本身中道具作者= {comment.author}而{area.text}不是。

<Comment author={comment.author}>
    {comment.text}
</Comment>

背景：

var data = [
  {author: "Pete Hunt", text: "This is one comment"},
  {author: "Jordan Walke", text: "This is *another* comment"}
];

var commentNodes = this.props.data.map(function (comment) {
  return (
    <Comment author={comment.author}>
      {comment.text}
    </Comment>
  );
});

Answer 1

首先，我们应该了解Comment是如何定义的。来自ReactJS教程：

var Comment = React.createClass({
  render: function() {
    return (
      <div className="comment">
        <h2 className="commentAuthor">
          {this.props.author}
        </h2>
        {this.props.children}
      </div>
    );
  }
});

对React.createClass的调用定义了新组件，可以通过以下方式呈现：

<Comment author="Pete Hunt">This is one comment</Comment>

<!-- Will be transformed into -->

<div className="comment">
  <h2 className="commentAuthor">
    Pete Hunt
  </h2>
    This is one comment
</div>

如您所见，{this.props.author}已替换为Pete Hunt，定义为author组件的Comment属性，{this.pros.children} - {{1} }}的内容（在这种情况下只是Comment）。

现在我们可以转到This is one comment声明了。您的CommentList函数是此组件的一部分，因此，我将显示完整定义：

commentNodes

您可以在此处看到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> ); } });函数，该函数是根据render（commentNotes）定义的。那么，<div className="commentList"> {commentNodes} </div>做了什么？

它将每个commentNodes对象转换为comment组件。假设我们将Comment定义为：

this.props.data

因此，调用var data = [ {author: "Pete Hunt", text: "This is one comment"}, {author: "Jordan Walke", text: "This is *another* comment"} ];将创建以下组件：

commentNodes

将呈现为：

<Comment author="Pete Hunt">This is one comment</Comment>
<Comment author="Jordan Walke">This is *another* comment</Comment>

<强> UPD

具体来说，为什么评论中的道具作者= {comment.author} 元素标签本身和{comment.text}不是。

这非常简单 - 按设计。您可以通过以下方式重写<div className="comment"> <h2 className="commentAuthor"> Pete Hunt </h2> This is one comment </div> <div className="comment"> <h2 className="commentAuthor"> Jordan Walke </h2> This is *another* comment </div>组件：

Comment

并将var Comment = React.createClass({ render: function() { return ( <div className="comment"> <h2 className="commentAuthor"> {this.props.author} </h2> {this.props.content} </div> ); } });重写为：

CommentList

另请注意，将评论文本传递为var CommentList = React.createClass({ render: function() { var commentNodes = this.props.data.map(function (comment) { return ( <Comment author={comment.author} content={comment.text} /> ); }); return ( <div className="commentList"> {commentNodes} </div> ); } });可让您使用嵌套元素创建{this.props.children}，而不仅仅是文本。

在ReactJS中连接数据模型 - 语法

1 个答案: