React组件JSX未生成预期HTML：href变量未正常解析求助

嘿，这问题我熟！你遇到的核心问题是没有使用模板字符串来拼接URL变量，而且在函数组件里误用了类组件的this.props写法，导致变量都没被正确解析。

问题分析 #

你当前的href是用双引号包裹的普通字符串：

href="/api/game_theory/game-files/{this.props.profileId}/files/{photo.id}/{photo.downloadName}"

React只会把这当成纯文本，不会识别里面的{}变量。另外，如果这是一个函数组件，this.props是多余的，直接用props就行（类组件才需要this.props）。

修复方案 #

把href的双引号换成反引号（），用ES6模板字符串语法，把变量用${}包裹起来，同时修正props`的调用方式：

return (
  <div>
    {props.photos.length > 0 && (
      <div>
        {props.photos.map((photo) => (
          <div key={photo.id}> {/* 别忘了加key，React列表渲染要求哦 */}
            <a
              target="_blank"
              rel="noopener noreferrer" {/* 加这个更安全，避免安全漏洞 */}
              href={`/api/game_theory/game-files/${props.profileId}/files/${photo.id}/${photo.downloadName}`}
            >
              {photo.title}
            </a>
          </div>
        ))}
      </div>
    )}
  </div>
);

额外提醒 #

1. 列表渲染一定要加key属性，用每个item的唯一标识（比如photo.id），这是React的要求，能提升渲染性能
2. 给target="_blank"的链接加上rel="noopener noreferrer"，可以防止被打开的页面篡改你的页面，提升安全性
3. 如果这是类组件，那把props.profileId改成this.props.profileId就行，模板字符串的用法不变

这样修改后，profileId、photo.id和photo.downloadName都会被正确解析成对应的值啦！

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