如何将奇/偶类添加到包装div

Question

我正在尝试构建一个页面，我希望将每个组件包装在div中，该div具有＆＃34; odd＆＃34;或者＆＃34;甚至＆＃34;这样我可以设置不同的背景颜色。我对gatsby和react很新，所以我想知道该怎么做？

我按照说明如何设置gatsby - 项目here，这是我到目前为止所做的：

index.js：

const IndexPage = () => (
  <div className="page-container">
    <component-1 />
    <component-2/>
    <component-3/>
    <component-4/>
    <component-5/>
 </div>
)

export default IndexPage

我想要的是这样的

const IndexPage = () => (
  <div className="page-container">
    <div className="odd">
       <component-1 />
    </div>
    <div className="even">
       <component-2 />
    </div>
    <div className="odd">
       <component-3 />
    </div>
    <div className="even">
       <component-4 />
    </div>
 </div>
)

export default IndexPage

出于显示原因，我刚刚调用了我的组件愚蠢的名字......

我怎么能做到这一点？