每隔一个映射元素改变样式

Question

我有一个问题 - 当我通过组件进行映射时，如何每秒更改一次组件的背景颜色？我应该以某种方式从“i”变量中调节它吗？或者当从 map 函数返回某些东西时可能是 if/else 条件？有没有更清洁的方法呢？我使用 styled-components 为我的大部分元素设置样式，但我想每隔一个项目更改一次 backgroundColor。

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>
      )
    })}
  </>
)

Answer 1

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

(i + 1) % 2 === 0

第一次运行
i 为 0
所以：(0 + 1) % 2 === 0 将返回 false
但对于第二次运行
i 是 1
所以：(1 + 1) % 2 === 0 将返回 true

---

如果可以的话，你可以使用 css :nth-child(2n)
使用此选择器，您可以将样式应用于每 2 个孩子 在这里查看：nth-child(n) MDN

更新

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