Javascript Reactjs中偶数/奇数div的样式

我试图设计奇数和偶数类的样式，但代码没有按预期工作。它将所有类都设计为一个。通过我的代码和输出，这将更容易理解。 输出： 代码：

.b1段：第n个子项（偶数）。说明包装器{
颜色：白色；
浮动：左；
}
.b1段：第n个子项（奇数）。说明包装器{
颜色：黑色；
浮动：对；
}

{getallservices.map（（服务）=>{
返回(
{service.servicesHeading}
{service.description.description}

)
})}
在
中。b1段是唯一的孩子。因此，
.b1段：第n个子项（奇数）
将始终被选中

如果要选择
.b1段
作为直接子项，则必须将
部分
标记作为主包装。然后，
.b1段
将被视为其渲染的子段，您的css将在其中工作

  {getallservices.map((service) => {

          return(
            <>
              <section className="services banner-page about  b1-segment bg-fx" style={{ backgroundImage:   `url(${service.imgDesk.fluid.src})` }}>
                <Fade bottom>
                  <Container>
                    <Row>
                      <Col md={12}>
                          <div className="description-wrapper">
                              <h3>{service.servicesHeading}</h3>
                              <p>{service.description.description}</p>  
                          </div>
                      </Col>
                    </Row>
                  </Container>
                </Fade>
              </section>
            </>
          )
        })}

{getallservices.map（（服务）=>{
返回(
{service.servicesHeading}
{service.description.description}

)
})}
在
中。b1段是唯一的孩子。因此，
.b1段：第n个子项（奇数）
将始终被选中

如果要选择
.b1段
作为直接子项，则必须将
部分
标记作为主包装。然后，
.b1段
将被视为其渲染的子段，您的css将在其中工作

  {getallservices.map((service) => {

          return(
            <>
              <section className="services banner-page about  b1-segment bg-fx" style={{ backgroundImage:   `url(${service.imgDesk.fluid.src})` }}>
                <Fade bottom>
                  <Container>
                    <Row>
                      <Col md={12}>
                          <div className="description-wrapper">
                              <h3>{service.servicesHeading}</h3>
                              <p>{service.description.description}</p>  
                          </div>
                      </Col>
                    </Row>
                  </Container>
                </Fade>
              </section>
            </>
          )
        })}

{getallservices.map（（服务）=>{
返回(
{service.servicesHeading}
{service.description.description}

)
})}
我试过了，输出和以前一样，仍然没有考虑第n个孩子。。。我知道某个地方有个小错误，但我似乎找不到。我试过了，输出和以前一样，仍然没有考虑到N个孩子。。。我知道某处有个小错误，但我似乎找不到。