如何将Javascript变量集成到ReactJS JSX样式元素中

Question

我有一个图片来源的javascript数组。现在，我需要在单独的盒子背景中实现每个图像源。我正在尝试将数组元素放入React JSX样式元素，如下所示（演示代码）

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

希望我能使您理解我的问题。请帮助，任何其他替代方式都将受到欢迎。预先谢谢你

Answer 1

For循环不能直接在render功能中使用。您可以改用map

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

您也可以检查此：Loop inside React JSX

希望这会有所帮助！