如何为包裹组件的div添加odd/even类（Gatsby/React场景）

作为React和Gatsby新手，你可以通过数组遍历+索引判断的方式轻松实现这个需求，不用手动给每个组件写重复的div容器。下面是具体步骤：

步骤1：整理组件为数组并导入 #

首先确保你已经正确导入所有组件（注意React组件必须首字母大写，比如Component1而不是component-1，否则会被识别为普通HTML标签导致报错），然后把它们放进一个数组里：

// 先导入你的组件
import Component1 from '../components/Component1'
import Component2 from '../components/Component2'
import Component3 from '../components/Component3'
import Component4 from '../components/Component4'
import Component5 from '../components/Component5'

// 将组件整理为数组
const componentList = [Component1, Component2, Component3, Component4, Component5]

步骤2：遍历数组动态生成带类名的容器 #

在你的IndexPage组件中，使用数组的map方法遍历组件列表，根据索引的奇偶性来设置odd或even类：

const IndexPage = () => {
  return (
    <div className="page-container">
      {componentList.map((Component, index) => (
        {/* 用index作为key（静态列表可以这么用，动态列表建议用唯一id） */}
        <div key={index} className={index % 2 === 0 ? 'odd' : 'even'}>
          {/* 渲染组件 */}
          <Component />
        </div>
      ))}
    </div>
  )
}

export default IndexPage

细节说明 #

• 索引判断逻辑：数组索引从0开始，index % 2 === 0对应第1、3、5个组件（索引0、2、4），给它们加odd类；索引为奇数的组件加even类，正好匹配你想要的效果。
• 组件数组的两种写法：上面的例子中数组存的是组件类型（Component1），如果你的组件需要传递props，这种写法更灵活；如果你已经提前写好了组件实例（比如<Component1 title="xxx" />），也可以把实例放进数组，直接在map里渲染：

  const componentList = [
    <Component1 title="组件1" />,
    <Component2 title="组件2" />,
    // ...其他组件实例
  ]
  
  // map的时候直接渲染即可
  {componentList.map((component, index) => (
    <div key={index} className={index % 2 === 0 ? 'odd' : 'even'}>
      {component}
    </div>
  ))}
  

• key的作用：React要求列表元素必须有唯一的key属性，这里用index作为key是最简单的方案，适合静态不排序的列表；如果你的组件列表会动态增删或排序，建议使用组件的唯一ID作为key。

最终效果 #

这样写出来的代码会自动生成你期望的结构：第一个组件被odd类的div包裹，第二个是even，以此类推，完全不需要手动重复编写容器代码~

内容的提问来源于stack exchange，提问作者ST80