在React JS中如何正确添加跳转外部站点的超链接？

核心问题 #

• 你把JSX格式的<a>标签嵌入了模板字符串，React不会解析模板字符串内的JSX语法，只会将其当做普通文本输出，所以超链接不会生效
• href属性写法错误：固定外部链接不需要用花括号包裹，若使用花括号则内部需要传入字符串格式的地址，你写的{http://google.com}会把http识别为未定义变量，触发语法报错

正确代码示例 #

// 直接在JSX中拼接内容即可
function YourComponent() {
  return (
    <p>
      WOW, the {CONFIG.NFT_NAME} is yours! go visit <a href="https://示例站点地址" target="_blank" rel="noopener noreferrer">Google</a> to view it.
    </p>
  )
}

如果需要把内容存在变量中复用，直接存为JSX片段即可，不要使用模板字符串包裹：

const content = (
  <p>
    WOW, the {CONFIG.NFT_NAME} is yours! go visit <a href="https://示例站点地址" target="_blank" rel="noopener noreferrer">Google</a> to view it.
  </p>
)

// 组件内直接渲染变量
function YourComponent() {
  return <>{content}</>
}

提示：外部链接建议添加target="_blank"和rel="noopener noreferrer"属性，避免新页面跳转带来的安全风险。

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