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

【问题标题】：How to integrate Javascript variable into ReactJS JSX style element如何将 Javascript 变量集成到 ReactJS JSX 样式元素中
【发布时间】：2020-02-24 15:52:06
【问题描述】：

我有一个图像源的 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>)

希望我能让你理解我的问题。请帮助，任何替代方式总是受欢迎的。提前谢谢你

【问题讨论】：

使用类似：const imageBoxes = images.map((image, index) => <JSX />)。然后您可以将<div>{imageBoxes}</div> 渲染到您的主渲染中，或者直接在其中执行.map。
@JamieDixon 感谢您的回复，但我的问题是如何将 javascript 变量集成到 React JSX 样式元素中。就像在 "style={{background: 'url(image)'}}"

标签： javascript css reactjs styles jsx

【解决方案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 变量集成到 React JSX 样式元素中。就像在“style={{background: 'url(image)'}}”中一样。让我编辑代码，它会造成混乱
我已经更新了这个例子。您可以使用模板文字来定义变量。这是阅读更多内容的链接：developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…
我还添加了一个具有相同用例的示例。希望这会有所帮助。