本文详解 React 组件中因错误使用单引号而非模板字符串（反引号）导致动态插值失效的问题，重点说明 ${id} 在普通字符串中不会被解析为变量值，从而造成所有卡片显示同一张图片的典型 Bug 及修复方案。
本文详解 react 组件中因错误使用单引号而非模板字符串（反引号）导致动态插值失效的问题，重点说明 `${id}` 在普通字符串中不会被解析为变量值，从而造成所有卡片显示同一张图片的典型 bug 及修复方案。
在 React 函数组件中，若需在 JSX 属性中嵌入动态值（如图片 URL 中的 id），必须使用模板字符串（Template Literal）——即由反引号（）包裹的字符串，并配合${expression}语法进行插值。而原代码中使用了单引号（'`）包裹 URL：
@@##@@
此处 ${id} 并未被 JavaScript 解析为变量，而是作为纯文本字面量直接传入 src 属性，最终浏览器请求的是形如 https://robohash.org/$%7Bid%7D&720%20*200 的无效 URL（$%7Bid%7D 是 ${id} 的 URL 编码结果）。由于 RoboHash 对非法 ID 会返回默认头像，因此所有卡片均显示同一张图片。
✅ 正确写法是改用反引号，启用模板字符串插值：
@@##@@
? 补充说明：
- 原 URL 中的 &720 *200 存在语法错误（& 后缺少参数名，空格也非合法 URL 字符），应改为标准 RoboHash 查询参数 ?size=720x200；
- 模板字符串支持多行与表达式，但此处仅需单行插值，简洁明确即可；
- 若 id 可能为空或含特殊字符，建议增加校验或编码：encodeURIComponent(id)。
? 总结：
- ❌ 单引号/双引号内的 ${...} 不会执行插值，仅作普通字符串；
- ✅ 必须使用反引号（`）才能启用 ES6 模板字符串功能；
- 动态属性值务必结合开发者工具（Network 面板）验证实际请求 URL，避免“看似正确、实则失效”的静默错误。
