javascript - 如何使用 React 中的 Children 属性删除组件

Question

我正在尝试实现这个场景:

1. 我有 Foo 组件 和 bar prop

2. 如果 bar 属性为 true --> 挂载 Foo 组件内的 Bar 组件

3. 如果 bar 属性为 false --> 卸载 Bar 组件
4. 我不希望示例组件知道此显示/隐藏，我只希望 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 阻止我自己修改 child 。

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

我应该使用上下文吗？

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

Answer 1

一个简单的解决方案是在 Foo 组件 内部使用 Bar 组件，并根据三元条件 进行渲染。

还返回一个 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>