如何在React中渲染字符串内的链接（不使用第三方库）

直接渲染字符串时，React会自动转义HTML标签使其变为纯文本。要解析其中的HTML并渲染出可点击的链接，可使用React内置的dangerouslySetInnerHTML属性，具体步骤如下：

• 修正字符串中的URL格式：原字符串里的href={"www.pageName.com"}需要改为标准的URL写法（比如href="https://www.pageName.com"），否则浏览器会将其识别为相对路径导致跳转失效
• 通过dangerouslySetInnerHTML将字符串作为HTML内容插入到元素中

代码示例：

const descr = 'You can visit this <a target="_blank" href="https://www.pageName.com">page</a> to see more things.';

const handleClick = () => {
  // 自定义点击逻辑
};

return (
  <div onClick={handleClick}>
    <div dangerouslySetInnerHTML={{ __html: descr }} />
  </div>
);

注意事项：

• dangerouslySetInnerHTML的命名带有"dangerously"是因为如果字符串包含未过滤的用户输入，可能引发XSS攻击。若该字符串来自不可信来源，务必先对HTML内容做转义过滤处理。
• 链接的href属性必须使用完整的协议前缀（如https://），否则会导致跳转路径错误。

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