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

您也可以检查以下内容：Loop inside React JSX

希望这会有所帮助！

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

1 个答案: