如何，我只卸載其中一個孩子在this.props.children

Question

所以，讓我們假設我有一些簡單的有一個返回渲染：

<Sample> 
    {this.props.children} 
</Sample> 

現在讓我們來調用此組件Example，讓通一些孩子道具吧：

<Example> 
    <ChildA /> 
    <ChildB /> 
</Example> 

現在可以說，我想卸載（因此調用componentWillUnmount()）ChildB。你會怎麼做呢？

Answer 1

如果您不想呈現ChildB，則您無法從Example（父組件將其傳遞爲props.children）中做任何事情。它只是顯示了在這個組件中寫的東西。

// Parent component 

<div> {this.props.children} </div> 

// somewhere in your code, you imported Parent component and 

<Parent> Hello </Parent> 

的一點是this.props.children只是如果有人使用這個組件一個跟你說，如果他們把東西在裏面，你把this.props.children此組件將要顯示的內容。沒有其他的。所以這不是Parent組件所做的事情。他們只是展示孩子們的一切。

您的問題導致另一個問題：如果我想要有條件地顯示組件，該怎麼辦？

在這種情況下，你可以做你的渲染方法如下：

{ yourConditionHere && <ComponentWhichWillMountIfConditionIsTrue /> } 

其結果是，如果你的條件通過，其子女接受你的父組件，將顯示該組件，反之亦然。