javascript - 如何将 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

您也可以查看:Loop inside React JSX

希望这对您有所帮助!