Как интегрировать переменную Javascript в элемент стиля ReactJS JSX

Question

У меня есть javascript массив источников изображений. Теперь мне нужно реализовать каждый источник изображения в отдельном поле фона. Я пытаюсь поместить элемент массива в элемент стиля React JSX, как показано ниже (демонстрационный код)

    const box = []

    for(const [index, image] of images.entries()) {
        box.push(
           <Box key={index} style={{background: 'url(image)'}}>
              Some code goes here.......
           </Box>
    )}

    return(<div>{box}</div>)

Надеюсь, я смогу помочь вам понять мою проблему. Пожалуйста, помогите, любой альтернативный способ всегда приветствуется. заранее спасибо

Answer 1

For цикл не будет работать напрямую в функции render. вы можете использовать map вместо

images.map((image, index) => (
  <Box key={index} style={{background: `url(${image})`}}>
       Some code goes here.......
  </Box>
))

Проверьте этот пример: https://codesandbox.io/s/broken-frost-4iz90

Вы также можете проверить это: Цикл внутри React JSX

Надеюсь, это поможет!