this.props.children選擇的innerHTML

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交互並更改組件的內容。

希望它有幫助