React - 父母和孩子的动态背景颜色

Question

在 React 中，我有这个组件层次结构：

App
  Header
  WaitingPage
    PlaceInLine
    NextRoom
    EstimatedTime
  Footer

我希望元素的背景是：白灰白灰等等。 （例如 - 白色 Header、灰色 PlaceInLine、白色 NextRoom 等等......）。 问题是在 WaitingPage 中，它并不总是包含所有 3 个孩子。它从服务器获取数据，例如，如果它排成一行，它将显示 PlaceInLine。当网站运行时，另一个数据可能会到达。

我尝试创建一个名为 ColorGiver 的类，它每次都会为您提供下一种颜色，但是当我将它作为道具传递给 WaitingPage（在使用它获取页眉的背景之后）时，网站的页眉和WaitingPage 的第一个子元素都是白色的。我想这是因为 React 渲染元素的顺序，但我不知道它是如何完成的......

<Header backgroundColor={this.colorGiver.next()} />
<WaitingPage colorGiver={this.colorGiver} />
<Footer backgroundColor={this.colorGiver.next() />

实现它的最佳方法是什么？

Answer 1

纯 CSS 会非常简单：

className:nth-child(even) {background: #CCC}
className:nth-child(odd) {background: #FFF}