當您將元素放入（或內部）React組件時，這意味着什麼？

Question

React組件通常看起來只是一個返回HTML元素的函數，或者是一個帶有render函數的類。

所以我們說的組件稱爲About。

如果代碼只是<About />，那麼在這裏表示，渲染HTML，根據它是聯繫在一起的狀態。

但怎麼樣：

<About> 
    <SomethingElse /> 
    <YetAnother> 
    <SomeMore /> 
    </YetAnother> 
</About> 

是什麼翻譯成？

Answer 1

內容

<SomethingElse /> 
<YetAnother> 
    <SomeMore /> 
</YetAnother> 

將成爲<About />一個特殊的道具，叫children

結構將被遞歸調用，編譯JSX爲數React.createElement(component, props, ...children)

但要注意，反應贏得」 t如果您的About組件僅包含

class Abount extends React.Component { 
    render() { 
    return <h1>About</h1> 
    } 
} 

，並不會呈現this.props.children的話，那麼

<SomethingElse /> 
<YetAnother> 
    <SomeMore /> 
</YetAnother> 

將完全忽略。

所以，如果你想支持你的組件嵌套組件，您需要自己處理props.children。

最簡單的方法是寫在你的渲染功能{this.props.children}，例如：

class About extends React.Component { 
    render() { 
    return (
     <div> 
     <h1>About</h1> 
     {this.props.children} 
     </div> 
    ) 
    } 
} 

Answer 2

考慮follwoing代碼

<About> 
    <SomethingElse /> 
    <YetAnother> 
    <SomeMore /> 
    </YetAnother> 
</About> 

在這裏你有嵌套的組件。因此SomethingElse, YetAnother在About組件內呈現爲兒童。如果您看到About組件的渲染代碼，您會發現類似{this.props.children}的東西，這基本上意味着current組件的子組件將在此處呈現。

類似的是YetAnother具有SomeMore作爲子組件的情況。

我希望我能解釋它。