我如何在React中使用children道具删除组件

Question

我正在尝试实现这种情况：

1. 我的酒吧道具有Foo组件

2. 如果bar prop为true- > 安装 Foo组件内部的Bar组件

3. 如果bar prop为false- > 卸载Bar组件
4. 我不希望Example组件知道此显示/隐藏，我只希望Foo知道何时显示或隐藏它
5. Bar不一定是Foo的直接子代，也可以更深地嵌套在Foo的子代中

 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'; 

我试图操纵this.props.children，但是React阻止我自己修改孩子。

我是否需要外部服务来在这两个组件之间进行通信？

我应该使用上下文吗？

寻找有关如何解决此问题的建议。

Answer 1

一种可能的解决方案是使用某种消息总线或pubSub。 在这种方法中，Bar组件将必须订阅总线，并显示/隐藏自身。 Foo组件将在componentWillReceiveProps中发布适当的消息。 更多： 这里

Answer 2

一种简单的解决方案是在Foo component Bar component内部使用Bar component ，并根据ternary condition渲染。

还返回JSX元素（来自Bar组件的有效react元素）而不是字符串。

 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>