React Quill Editor数据链接新标签页打开问题：dangerouslySetInnerHTML无效

要让通过dangerouslySetInnerHTML渲染的链接在新标签页打开，有几种可靠的实现方式：

方法1：通过DOMPurify钩子自动添加属性 #

DOMPurify支持通过钩子在净化过程中修改元素，我们可以给所有<a>标签添加target="_blank"和安全属性rel="noopener noreferrer"（必须添加，避免反向劫持风险）：

import DOMPurify from 'dompurify';

// 注册钩子，处理a标签
DOMPurify.addHook('afterSanitizeAttributes', function(node) {
  if (node.tagName === 'A') {
    node.setAttribute('target', '_blank');
    node.setAttribute('rel', 'noopener noreferrer');
  }
});

// 净化并渲染
const sanitizedHtml = DOMPurify.sanitize(htmlString);
return <div dangerouslySetInnerHTML={{ __html: sanitizedHtml }} />;

方法2：预处理HTML字符串添加属性 #

如果HTML字符串结构相对简单，可通过正则表达式替换所有<a>标签，补充所需属性：

// 预处理HTML，给未设置target的a标签添加属性
const processedHtml = htmlString.replace(
  /<a(?!.*target="_blank")([^>]+)>/gi,
  '<a$1 target="_blank" rel="noopener noreferrer">'
);

// 净化后渲染
const sanitizedHtml = DOMPurify.sanitize(processedHtml);
return <div dangerouslySetInnerHTML={{ __html: sanitizedHtml }} />;

注意：正则处理HTML有局限性，若标签嵌套复杂或属性格式多样，优先选择方法1。

方法3：通过事件委托处理点击 #

如果不想修改HTML内容，可在父元素上监听点击事件，拦截a标签的点击行为并在新标签打开：

import { useRef, useEffect } from 'react';

function MyComponent({ htmlString }) {
  const containerRef = useRef(null);

  useEffect(() => {
    const handleClick = (e) => {
      const target = e.target.closest('a');
      if (target && target.href) {
        e.preventDefault();
        window.open(target.href, '_blank', 'noopener noreferrer');
      }
    };

    const container = containerRef.current;
    container?.addEventListener('click', handleClick);
    return () => container?.removeEventListener('click', handleClick);
  }, []);

  const sanitizedHtml = DOMPurify.sanitize(htmlString);
  return <div ref={containerRef} dangerouslySetInnerHTML={{ __html: sanitizedHtml }} />;
}

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