Question

让我们说我们的组件结构如下：

CommentList
- 注释

CommentList定义为：

var CommentList = React.createClass({
  render: function() {
    return (
      <div className="commentList">
        <Comment author="Pete Hunt">This is one comment</Comment>
      </div>
    );
  }
});

和评论定义为

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

this.props.children选择文本“这是一条评论”似乎有点奇怪。为什么它被称为“儿童”，不应该是“innerHTML”或什么？我觉得我错过了什么。

Answer 1

您在组件之间包装的内容不是其内部HTML，而是包装在ReactElement中，并作为prop中的props.children传递。

当您使用JSX语法时，无论在元素的标记内插入什么，都会成为组件的props.children数组的元素0。当只有一个子节点时，不会创建任何数组，props.children指向唯一的元素。 From the docs：

然而，当只有一个孩子时，this.props.children会是没有数组包装器的单个子组件本身。这个保存数组分配。

Answer 2

通过反应，您可以处理虚拟DOM，这就是为什么您不直接与DOM交互，而是与虚拟DOM交互。

this.props.children指定所有者传递给您的孩子。 https://facebook.github.io/react/tips/children-undefined.html

所以这里的孩子可能会在一个范围内（自动添加）获得“这是一条评论”。因为它是由所有者组件传递的。

这样您就可以与虚拟DOM进行交互并更改组件的内容。

希望有所帮助

this.props.children选择innerHTML

2 个答案: