2016-07-27 61 views
14

我意識到沒有任何組件使用{this.props.children}ReactJS:爲什麼使用this.props.children?

我傾向於按照官方文檔在https://facebook.github.io/react/docs/multiple-components.html的頂部所述的方式組成我的組件。

是嵌套這樣的組件...

<A> 
    <B /> 
    <C /> 
</A> 

...有益構成了他們喜歡這個?:

A.js

render() { 
    <B /> 
    <C /> 
} 

。假定是這樣的正確的術語,我錯過了什麼?

+0

如果你不知道孩子是什麼?想想一個包裝器組件,它將一些樣式或動作應用到子項中,而不管它們是什麼。此外,它更少關於一個組件,更多關於應用程序,當你用反應建立一個站點時,你會使用它 – JordanHendrix

回答

19

在我應用程序我很少使用this.props.children,因爲我經常知道具體要渲染的孩子。在圖書館或者在特定應用程序之外重新使用的組件中,我經常見到它。我認爲this.props.children與該用例更相關。

+0

好點,這是平息我的想法最有用的答案。 – MattDuFeu

9

我想說當你不知道你想渲染什麼的時候它會很有用。

例如,你有一個提示的包裝,讓我們說這是在您的情況A組件,你可以用它來傳遞不同的內容:

<A> 
    <div>Some text...</div> 
    <ImageComponent /> // render an image as well 
</A> 

或者:

<A> 
    <div>Only text</div> 
</A> 
2

某些組件提前不知道他們的孩子。這對於代表通用「盒子」的組件(如邊欄或對話框)尤其常見。

我們建議這樣的組件使用特殊兒童道具子元素直接傳遞到它們的輸出: Read More...