Question

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

我 Foo组件 bar prop
如果bar prop true - ＆gt;位于Foo组件

安装条组件

如果bar prop false - ＆gt; 卸载条组件
我不希望示例组件知道此显示/隐藏，我只希望Foo知道何时显示或隐藏
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中发布appriopriate消息。更多：here

Answer 2

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

还返回一个JSX元素（Bar组件的有效反应元素）而不是字符串。

＆＃13;

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

＆＃13;

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

＆＃13;

如何使用React中的子prop来删除组件

2 个答案: