Question

我正在尝试为集合中的每个项目设置背景图像，但在尝试访问模型属性时我收到语法错误。任何人都可以帮忙吗？

您可以假设已收到该收藏。

class MyThing extends React.Component {

  const collection = this.props.collection;

  render () {
    return (
      <div> 
        {collection.models.toList().map((model,key) =>
        <div className="post" key={model.id}>
          <div className="graphic" 
             style={{background:"url(" + {model.img_url} + ")"}}>
          </div>
        </div>
        )}
      </div>
    );
  }
}

但是，我收到以下语法错误，这意味着我无法使用普通的点符号来访问该属性：

ERROR in ./MyThing.js
Module build failed: SyntaxError: Unexpected token, expected , (55:87)

  53 | div className="post" key={model.id}>
> 55 | <div className="graphic" style={{background:"url(" + {model.img_url} + ")"}}></div>
     |                                                            ^

从像这样的集合中设置模型属性的适当方法是什么？

有什么想法吗？

Answer 1

尝试删除model.img_url周围的大括号以获取此信息：

<div className="graphic" style={{background:"url(" + model.img_url + ")"}}></div>

如何在内联样式中使用React集合属性？

1 个答案: