React中如何创建动态查询字符串实现商品图片API路径动态拼接

问题原因 #

JSX中元素属性如需传入动态值，必须将整个属性值包裹在{}内，你当前在固定字符串中嵌入{变量}的写法会被识别为普通文本，不会解析为动态值。

实现方法 #

使用ES6模板字符串拼接API路径，productID取当前遍历到的商品IDproduct.ID，imageID取当前商品ProductImagesID数组中的对应ID即可（示例取数组第一个ID，你可根据实际需求调整索引）：

<img
  className=""
  alt={product.Name}
  src={`/api/v1/ProductFile/?productID=${product.ID}/?get=Product/?imageID=${product.ProductImagesID[0]}`}
/>

容错优化 #

如果存在商品无匹配图片、ProductImagesID数组为空的场景，可添加兜底逻辑避免路径报错：

<img
  className=""
  alt={product.Name}
  src={
    product.ProductImagesID?.length 
    ? `/api/v1/ProductFile/?productID=${product.ID}/?get=Product/?imageID=${product.ProductImagesID[0]}`
    : '/默认占位图路径'
  }
/>

注：可根据实际API规则调整路径中的斜杠、参数分隔符，确保最终拼接后的路径符合接口要求。

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