React js工作流程，如何在父级处理动态子级

Question

我可能在这里遗漏了 React 的核心租户，但在高层次上，我的 flex 布局类似于下面的代码（为简洁起见，去掉了浏览器特定的 flex 变体）。我从我想在概念上结束的东西开始：

 body {
      padding: 0;
      margin: 0;
    }
    .box {
      height: 100vh;
      max-height: 100vh;
      width: 80%;
      margin: auto;
      display: flex;
      flex-direction: column;
    }
    .boxHeader, .boxFooter {
      flex: 0 0 auto;
    }
    boxContent {
      flex: 1 1 auto;
      overflow-Y: auto;
    }

我正在尝试获得这样的基本页面布局：

<div className="box">
  <div className="boxHeader" id='coreHeader>
    <HeaderComponentOne>Some Content - header is pseudo-fixed</HeaderComponentOne>
  </div>
  <div className="boxHeader id="dynamicHeader">
    <HeaderComponentTwo>Some Content - header is pseudo-fixed</HeaderComponentTwo>
  </div>
  <div className="boxContent>
    {this.props.children}
  </main>
  <div className="boxFooter" id="dynamicFooter>
    <FooterComponentOne>Some Content - footer is pseudo-fixed</FooterComponentOne>
  </div>
  <div className="boxFooter" id="coreFooter">
    <HeaderComponentTwo>Some Content - footer is pseudo-fixed</FooterComponentTwo>
  </div>
</div>

这一切都很好并且有效 - 除了我需要动态页眉和页脚保持伪固定，但要根据当前子“页面”动态提供内容。所以这几乎就像我需要以某种方式将孩子的道具传递给父布局的动态页眉和页脚。我不在乎它最终是父母还是孩子/孩子，但如果其他周围的 div 或元素卡在它的中间，flex 布局会窒息，所以“包装器”似乎不是一个选择。

再一次，这在概念上是我想要最终实现的目标，并且对任何能让我到达那里的东西都持开放态度。我什至不确定接下来要尝试什么来获得这种最终效果。我玩过几个父子组合，试图让它按预期运行，并花了几个小时寻找类似无济于事的东西。甚至可以做这样的事情吗？如果可以，对于如何最好地处理它有什么建议或想法？我也在使用 react 路由器，这很重要。

Here 是一个显示基本需求的代码笔，但问题是这些必须堆叠在一起，并且没有多余的 React 包装 div 等，因为这似乎会使 flex 失效。我还需要其中两个有时不在页面上，这似乎也弄乱了。

所以 - 本质上得到 2 个 React 动态标题组件 - 其中第 2 个可能并不总是存在，一个或多个根据需要滚动的动态 React 内容组件，以及两个动态 React 页脚组件 - 其中第一个可能并不总是存在在那里表现得像 codepen。页眉和页脚是“固定的”，内容可以滚动。

我猜一定有办法让两人一起玩得很好，但也许不是，如果是这样，我还没有弄清楚。

TIA！

Answer 1

确实每个 react 组件只能渲染一个组件，所以每个 react 组件至少需要一个包装器。 但是您的结构已经手动编码了所有 <div> 包装器，而您没有这些。

为了让 react 呈现你想要的结构，你的根 react 组件将呈现如下内容：

<div className="container">
  <HeaderComponentOne>Some Content</HeaderComponentOne>
  <HeaderComponentTwo>Some Content</HeaderComponentTwo>
  {this.props.children}
  </main>
  <FooterComponentOne>Some Content</FooterComponentOne>
  <FooterComponentTwo>Some Content</FooterComponentTwo>
</div>

每个子组件（<HeaderComponentOne> 等等，以及每个this.props.children）也只能渲染一个组件，可能会渲染其他/多个子子组件。但这对你的结构很好。
您只需将适用的类名应用于这些组件中的每一个。

您可以找到working react-based codepen here。

希望这会有所帮助！