Question

我想知道是否有一种方法只在渲染子组件时呈现父组件，反之亦然。如果你谷歌标题你会发现相当多的条目，但没有什么对我的情况有效，因为我的元素不是undefined或null。想象一下父母：

class Parent extends React.Component {
  constructor(props){
    super(props);
  }

  render() {
    return (
      <div>
        <div className="container">
          {this.props.children}
        </div>
      </div>
    );
  }
}

以下孩子可能会依赖某些设置。例如，仅显示布尔值是否为真。

class Child extends React.Component {
      constructor(props){
        super(props);
        const showChild = Settings.get(...);
        this.state = {
           visible:showChild
        }
      }

      render() {
        const showHello = this.state.visible ? <div>Hello</div> : "";
        return (
          <div>{showHello}</div>
        );
      }
    }

在我的布局中，我支持它：

class Layout extends React.Component {
  constructor(props){
    super(props);
  }

  render() {
    return (
      <Parent>
        <Child />
      </Parent>
    );
  }
}

如果没有呈现Parent元素，是否可以卸载Child？谢谢。

更新：如果我希望此Parent和Child位于Layout，Parent的容器类具有更大的填充或边距，则用例是因为它仍然在组件树中。如果没有渲染Child，则布局中仍然存在较大的间隙，它看起来很奇怪。

Answer 1

React并没有考虑到这个工作流而设计，实际上恰恰相反：数据在DOM树中明确传递，而动作向上传递。根据扩展，React必须在Parent之前呈现Child。

我建议您将Parent和Child重构为Parent知道Child需要哪些设置的点;在您的Child组件参与的情况下：

<Child settings={settings} />

重申一下，这也是一种更自然的React方法，数据显式向下传递，而不是隐式加载到Child中（虽然总有例外，例如{{{ 1}}具有connect()）的组件。但这种方法的一个好处是现在react-redux能够确定是否呈现其Parent。

但是Child的渲染呢？我们也不想抑制它吗？如果您这样做，那么您需要Parent组件了解其Layout组件的需求，因此：

Parent

这是<Parent settings={settings} />的常用方法，因为渲染DOM层次结构是必须的。

Answer 2

您可以通过检查是否有任何子女来有条件地在Parent组件中呈现。

使用this.props.children.length查看是否有正常渲染，如果没有，则返回空元素。

React仅在呈现Child时呈现父级

2 个答案: