Javascript 仅在渲染子对象时才对父对象进行反应渲染

我想知道是否有一种方法仅在渲染父组件时渲染其子组件，反之亦然。如果你用谷歌搜索标题，你会发现很多条目，但对我的案例来说没有任何效果，因为我的元素不是

未定义的

或

空的

。想象一位家长：

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

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

类父级扩展React.Component{
建造师（道具）{
超级（道具）；
}
render（）{
返回(
{this.props.children}
);
}
}

以下子项可能取决于某些设置。例如，仅当布尔值为true时显示

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

类子级扩展React.Component{
建造师（道具）{
超级（道具）；
const showChild=Settings.get（…）；
此.state={
可见：showChild
}
}
render（）{
const showHello=this.state.visible？Hello:“”；
返回(
{showHello}
);
}
}

在我的布局中，我的脚手架如下：

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

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

类布局扩展了React.Component{
建造师（道具）{
超级（道具）；
}
render（）{
返回(
);
}
}

如果未呈现

子元素，是否可以卸载
父元素
？多谢各位

更新：一个用例是，如果我希望此
父级
和
子级
位于
布局
中，并且
父级
具有较大填充或边距的容器类，因为它仍然在组件树中。如果未渲染子级，布局中会保留一个很大的间隙，它看起来很奇怪。
您可以通过检查是否有子级，有条件地在父级组件中渲染

使用
this.props.children.length
查看是否有，如果有，则正常渲染，如果不返回空元素。
React在设计时没有考虑此工作流，事实上相反：数据显式向下传递到DOM树，而操作则向上传递。根据扩展，React必须在您的
子项之前呈现您的
父项

我建议重构您的
父项
和
子项
，使
父项
知道其
子项
需要哪些设置；只要您的
子组件参与：

<Child settings={settings} />

这是
React
的常用方法，因为必须向下呈现DOM层次结构
 这个的用例是什么？你为什么想要这个？我同意，更多的细节会有帮助。现在听起来像是一个典型的XY问题。@JordanHendrix我刚刚添加了一个更新。这是一个很好的方法。我希望将父组件用于多个用例（用于多个子组件）。只是想知道，我将不得不有一个非常普遍的方法设置，在我看来是没有用的。这样行吗？有什么想法吗？谢谢@MichelH至少，您的
父组件
需要传递某种类型的
键
，然后使用该键调用某些
设置服务。getSettingsByComponentType（type）
，现在您在
父组件
中进行了设置，这使组件变得动态；您还有
子对象的元数据
，可以根据需要进行渲染。我最近使用了这种方法，它有一些非常好的好处。看一下React中的第43行，然后是第60行（），我们可以将组件本身实际存储在其他对象上，甚至可以从服务中检索它。因此，任何方法都是有效的。我无法访问您的存储库。是privat吗？抱歉，这里有一个公开的要点：
<Parent settings={settings} />