React JSX 中嵌套引号内的变量插值答案

【问题标题】：Variable interpolation inside nested quotations in React JSXReact JSX 中嵌套引号内的变量插值
【发布时间】：2021-12-24 14:59:04
【问题描述】：

我是react新手，不知道如何在嵌套引用中显示照片，我知道的用法单引号内的变量插值：{assets/images/categories/${photo}} 但不知道如何制作动态 cat-2.jpg

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/cat-2.jpg')"
          }}
        >
          <div className="product__discount__percent">-20%</div>
        </div>
        <div className="product__discount__item__text">
          <span>{name}</span>
        </div>
      </div>
    </div>
  );
};

【问题讨论】：

标签： variables nested jsx interpolation quotations

【解决方案1】：

我已经用变量解决了

const AllItems = ({ post: { id, name, type, photo } }) => {
  const imgPath = `assets/images/categories/${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(${imgPath})`
          }}
        >
          <div className="product__discount__percent">-20%</div>
        </div>
        <div className="product__discount__item__text">
          <span>{name}</span>
        </div>
      </div>
    </div>
  );
};

【讨论】：