Javascript 反应：如何在通过渲染进行映射时使用内联样式

在通过Render（）中的项目数组进行映射时，我尝试动态使用项目的id。如何从已有的渲染映射中执行此操作

  render() {
    return (
      <div className="container">
        <h1>New Houte</h1>
        {this.state.items.map(item => 
            <div className="item-container" key={item.id}>
              <div style={ { backgroundImage: 'url("../../images/' +{item.id} + ')' } } className="image-container" key="image">

render（）{
返回(
新霍特
{this.state.items.map（item=>

不要做：

<div style={ { backgroundImage: 'url("../../images/' +{item.id} + ')' } } className="image-container" key="image">

但要做到：

<div style={ { backgroundImage: 'url("../../images/' + item.id + '")' } } className="image-container" key="image">

或：

---

在JSX中打开大括号{}进行计算。在这里，您只是在一个字符串中，所以它是原始JS，这就是它不起作用的原因：）

另一种方法是使用

在您的情况下，使用backtick（数字1左边的键）会是这样的

---

你刚刚做到了。这种方式是个好方法。但是你缺少了一个引号。也许还有一个扩展名？比如

'url（../../images/'+{item.id}+'.png”）

我一直收到一个语法错误，声明：`“意外的标记，预期”，它指向{item.id}中的句点。

<div style={ { backgroundImage: `url("../../images/${item.id}")` } } className="image-container" key="image">

`{ { backgroundImage: `url("../../images/${item.id}")` } }`.