如何使用孩子託在陣營

Question

我想實現這個場景我刪除組件：

1. 我富組件與吧託

2. 如果酒吧道具true - >安裝Bar組件即Foo組件內

3. 如果酒吧道具假 - >卸載欄組件
4. 我不想例組件要知道這顯示/隱藏的，我只想要富，知道什麼時候可以顯示或隱藏它
5. 酒吧是沒有必要美孚的直接孩子，也可以在美孚的孩子

const Example =() => { 
    return (
    <Foo bar={true/false}> 
     <div>some div</div> 
     <Bar></Bar> 
    </Foo> 
) 
}; 

class Foo extends React.Component { 

    componentWillReceiveProps({bar}) { 
    if (bar) { 
     /* I want to show bar!! */ 
    } else { 
     /* I want to remove only bar!! */ 
     /* maybe doing something like: this.props.children.searchForBar().removeNode() */ 
    } 
    } 

    render() { 
    return (
     <div>{this.props.children}</div> 
    ) 
    } 
}; 

const Bar =() => 'I am some bar'; 

我已經特里嵌套更深d來操縱this.props.children，但React阻止我自己修改孩子。

我需要一個外部服務來進行這兩個組件之間的通信嗎？

我應該用上下文嗎？

尋找關於如何解決此問題的建議。

Answer 1

可能的解決方案之一是使用某種消息總線或pubSub。在這種方法中，酒吧組件將不得不訂閱公共汽車，並顯示/隱藏自己。 Foo組件將在componentWillReceiveProps中發佈appriopriate消息。更多：here

Answer 2

一個簡單的解決方案是使用Bar component內Foo component和渲染根據ternary condition。

還返回一個JSX元素（來自Bar組件的有效反應元素）而不是字符串。

const Example =() => { 
 
    return (
 
    <Foo bar={true}> 
 
     <div>some div</div> 
 
    </Foo> 
 
    
 
) 
 
}; 
 

 
class Foo extends React.Component { 
 

 
    
 
    render() { 
 
    return (
 
     <div> 
 
     <div>{this.props.children}</div> 
 
     {this.props.bar? <Bar />: null} 
 
     </div> 
 
    ) 
 
    } 
 
}; 
 

 
const Bar =() => <div>I am some bar</div>; 
 

 
ReactDOM.render(<Example/>, document.getElementById('app'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.js"></script> 
 
<div id="app"></div>