React JSX 嵌套引号场景下如何使用变量插值动态设置图片路径

解决方案 #

你可以直接在backgroundImage字段中使用你已经掌握的模板字符串插值语法，嵌套的单引号不会和外层模板字符串的反引号产生冲突，修改方式如下：

核心修改代码

style={{
  backgroundImage: `url('assets/images/categories/${photo}')`
}}

修改后完整组件代码

const AllItems = ({ post: { id, name, type, photo } }) => {
  return (
    <div className="col-lg-2 col-md-2 col-sm-4 col-xs-6">
      <div className="product__discount__item">
        <div
          className="product__discount__item__pic set-bg"
          style={{
              backgroundImage: `url('assets/images/categories/${photo}')`
          }}
        >
          <div className="product__discount__percent">-20%</div>
        </div>
        <div className="product__discount__item__text">
          <span>{name}</span>
        </div>
      </div>
    </div>
  );
};

补充说明

如果你不习惯模板字符串写法，也可以用普通字符串拼接实现相同效果：

style={{
  backgroundImage: "url('assets/images/categories/" + photo + "')"
}}

内容的提问来源于stack exchange，提问作者Abdul Latif