Javascript 样式每秒钟更改一次映射元素

我有一个问题-当我映射组件时，如何每秒更改组件的背景色？我是否应该以某种方式从“I”变量对其进行条件化。。？或者，当从map函数返回某些内容时，是否存在if/else条件？有没有更干净的方法？我使用样式化组件来设置大多数元素的样式，但我希望每秒钟更改一次背景颜色

const Tree = memo(({ children, name, style, defaultOpen = false }) => {
  const [isOpen, setOpen] = useState(defaultOpen)
  const previous = usePrevious(isOpen)
  const [bind, { height: viewHeight }] = useMeasure()
  const { height, opacity, transform } = useSpring({
    from: { height: 0, opacity: 0, transform: 'translate3d(20px,0,0)' },
    to: { height: isOpen ? viewHeight : 0, opacity: isOpen ? 1 : 0, transform: `translate3d(${isOpen ? 0 : 20}px,0,0)` }
  })
  const Icon = Icons[`${children ? (isOpen ? 'Minus' : 'Plus') : 'Close'}SquareO`]
  return (
    <Frame>
      <Icon style={{ ...toggle, opacity: children ? 1 : 0.3 }} onClick={() => setOpen(!isOpen)} />
      <Title style={style}>{name}</Title>
      <Content style={{ opacity, height: isOpen && previous === isOpen ? 'auto' : height }}>
        <a.div style={{ transform }} {...bind} children={children} />
      </Content>
    </Frame>
  )
})

const App = () => (
  <>
    <Global />
    {data.map((info, i) => {
      return (
        <div key={i}>
          <Tree name={info.name} defaultOpen>
            {info.division.map((divi, idx) => (
              <Tree name={divi.title}>
                {divi.nonITteams.map((nonITteam) => {
                  return <li>{nonITteam}</li>
                })}
                {divi.teams.map((team) => {
                  return (
                    <Tree name={team.name}>
                      {team.members.map((member) => {
                        return <li>{member}</li>
                      })}
                    </Tree>
                  )
                })}
              </Tree>
            ))}
          </Tree>
        </div>
      )
    })}
  </>
)

consttree=memo（{children，name，style，defaultOpen=false}）=>{
常量[isOpen，setOpen]=使用状态（默认打开）
const previous=usepvious（等参线）
const[bind，{height:viewHeight}]=useMeasure（）
const{height，opacity，transform}=useSpring({
from:{height:0，opacity:0，transform:'translate3d（20px，0,0）}，
到：{height:isOpen？viewHeight:0，不透明度：isOpen？1:0，transform:`translate3d（${isOpen？0:20}px，0,0）`
})
const Icon=Icons[`${children？（isOpen？'Minus'：'Plus'）：'Close'}square`]
返回(
setOpen（！isOpen）}/>
{name}
)
})
常量应用=（）=>(
{data.map（（信息，i）=>{
返回(
{info.division.map（（divi，idx）=>(
{divi.nonititems.map（（nonititem）=>{
返回
{noniteam}
})}
{divi.teams.map（（团队）=>{
返回(
{team.members.map（（member）=>{
返回
{member}
})}
)
})}
))}
)
})}
)

为了获得你可以使用的每一件物品

（i+1）%2==0

第一次运行时
我是0
因此：

（0+1）%2==0

将返回

false

但对于第二次运行
我是1
因此：

（1+1）%2===0

将返回

true

---

如果可以，您可以使用css

：第n个子项（2n）

使用此选择器，您可以将样式应用于每个第2个子项 请点击此处：

使现代化

{data.map（（信息，i）=>{
})}

我试着这么做，但它返回的是蓝色，即使没有样式的else语句也是如此。我应该在别处使用这个条件吗？{data.map（（info，i）=>{if（i%2==0）{return（查看我的更新答案@MrVoland

                {data.map((info, i) => {
                    <div key={i} style={i % 2 === 0 ? { backgroundColor: "blue" } : {}} />
                })}