如何将含转义HTML标签的字符串转为可点击React JSX元素？

这问题我之前也踩过坑！React出于安全考虑，默认会把所有直接渲染的字符串内容自动转义成纯文本，所以你那些转义后的<a>标签（也就是<a href="#">here</a>这类内容）自然就只会显示成普通文本，不会被浏览器解析成可点击的链接。

解决方案：使用dangerouslySetInnerHTML #

React提供了一个特殊属性dangerouslySetInnerHTML，它可以让你直接把HTML字符串注入到DOM中，浏览器会解析并渲染这些HTML内容。你只需要修改渲染description的部分：

const renderDatas = () => {
  return datas.map((data, index) => {
    // 注意要加唯一key，符合React列表渲染的要求
    return (
      <div key={index}>
        <div dangerouslySetInnerHTML={{ __html: data.description }} />
      </div>
    )
  })
}

重要提醒：警惕XSS风险 #

这个属性名字里的dangerously可不是噱头——如果你的description内容来自用户输入或者不可信的数据源，直接注入HTML可能会导致XSS攻击（比如用户输入恶意脚本）。如果是这种场景，你需要先对内容做过滤处理，只允许安全的HTML标签和属性（比如仅保留<a>标签，同时限制href的协议为http/https等）。

另外你用字符串模板（`）定义内容并不影响结果，不管是模板字符串还是普通字符串，React都会把它们当作纯文本处理，必须通过dangerouslySetInnerHTML来触发浏览器的HTML解析。

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