使用react-intl无法渲染链接，仅显示纯文本的原因咨询

问题原因 #

你当前的代码存在两个核心问题：

1. 消息内容是转义后的HTML实体：msgid中的<a>标签被写成了<a>这类HTML实体字符，react-intl会直接将这些实体当作普通文本输出，不会解析为HTML标签。
2. 错误使用dangerouslySetInnerHTML：即使你尝试用dangerouslySetInnerHTML插入内容，由于实体字符已经被当作纯文本处理，浏览器只会显示<a>的字面内容，不会解析成链接。

另外，react-intl的设计理念是通过组件插值处理富文本，而非直接嵌入HTML，你原有的写法本身就不符合它的最佳实践。

正确解决方案（推荐） #

使用react-intl的占位符+React组件插值方式，安全且符合框架设计：

// 定义消息时用占位符代替HTML部分
const msgid = 'Not all item(s) could be added to your {cartLink}. Please review error(s) below.';

// 在FormattedMessage中传递React元素作为占位符的值
<FormattedMessage
  id={msgid}
  defaultMessage={msgid}
  values={{
    cartLink: (
      <a 
        title="Cart" 
        href="http://localhost:4502/homepage.html" 
        target="_blank"
        rel="noopener noreferrer" // 防止目标页面篡改当前页面，提升安全性
      >
        Cart
      </a>
    )
  }}
/>

不推荐的应急方案（仅作参考） #

如果必须通过innerHTML渲染（不建议，存在XSS风险），需要确保消息内容是未转义的原始HTML，而非实体字符：

// 直接写原始HTML，不要转义
const msgid = 'Not all item(s) could be added to your <a title="Cart" href="http://localhost:4502/homepage.html" target="_blank">Cart</a>. Please review error(s) below.';

<FormattedMessage id={msgid} defaultMessage={msgid}>
  {(data) => <span dangerouslySetInnerHTML={{ __html: data }} />}
</FormattedMessage>

注意：这种方式会绕过React的XSS防护，若消息内容来自用户输入或不可信来源，极易引发安全问题，务必谨慎使用。

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