Блог

У меня вопрос — как я могу менять цвет фона компонента каждый второй раз при отображении через компонент? Должен ли я каким-то образом обусловливать его из переменной «i» ..? Или, может быть, условие if / else при возврате чего-либо из функции map? Есть ли более чистый способ сделать это? Я использую 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 amp;amp; 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>
      )
    })}
  </>
)
 

чтобы получить каждый второй элемент, вы можете использовать

(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" } : {}} />
                })}