React中dangerouslySetInnerHTML里onClick事件失效的原因与解决

为什么点击<sup>标签会报错？ #

• 你用dangerouslySetInnerHTML把API返回的字符串渲染成DOM时，里面的onClick={handleClick}会被当成原生HTML的事件属性处理。原生DOM事件中的函数需要在全局作用域查找，但你组件里的handleClick是组件内部的局部函数，不在全局作用域内，所以浏览器找不到它，就会抛出handleClick is not defined的错误。
• React的事件绑定基于自身的合成事件系统，和原生DOM事件逻辑不同。直接通过innerHTML插入的事件属性不会经过React的事件处理流程，自然无法访问组件内部的函数。而按钮的onClick是React正常的事件绑定，所以能正常触发。

解决办法 #

办法一：用HTML转React元素的库（推荐）

使用html-react-parser工具把API返回的HTML字符串转换成React元素，转换过程中可以直接绑定组件内部的函数。
步骤：

1. 安装依赖：

npm install html-react-parser

2. 修改组件代码：

import parse from 'html-react-parser';

export default function Home() {
  const handleClick = () => alert('clicked!');

  // 建议让API返回不带onClick的纯HTML，或者后续处理移除原有属性
  const text = `some text and <sup>123</sup>`;

  // 解析HTML时，给sup标签添加React的onClick事件
  const parsedHtml = parse(text, {
    transform: (node) => {
      if (node.name === 'sup') {
        return <sup onClick={handleClick}>{node.children}</sup>;
      }
      return node;
    }
  });

  return (
    <div>
      <div>{parsedHtml}</div>
      <button onClick={handleClick}>Click me now!</button>
    </div>
  )
}

办法二：手动给DOM元素绑定事件

利用useEffect在组件挂载后，找到渲染出的sup元素，手动添加点击事件监听：

import { useEffect, useRef } from 'react';

export default function Home() {
  const handleClick = () => alert('clicked!');
  const containerRef = useRef(null);

  const text = `some text and <sup>123</sup>`;

  useEffect(() => {
    const supElement = containerRef.current?.querySelector('sup');
    if (supElement) {
      supElement.addEventListener('click', handleClick);
      // 组件卸载时清理事件，避免内存泄漏
      return () => supElement.removeEventListener('click', handleClick);
    }
  }, [handleClick]);

  return (
    <div>
      <div ref={containerRef} dangerouslySetInnerHTML={{ __html: text }} />
      <button onClick={handleClick}>Click me now!</button>
    </div>
  )
}

注：如果API返回内容包含多个sup标签，需要用querySelectorAll遍历绑定事件。

办法三：事件委托

给父容器添加点击事件，判断点击目标是否为sup元素，若是则触发handleClick：

export default function Home() {
  const handleClick = () => alert('clicked!');

  const handleContainerClick = (e) => {
    // 若sup标签内有子元素，可调整为e.target.closest('sup')来判断
    if (e.target.tagName === 'SUP') {
      handleClick();
    }
  };

  const text = `some text and <sup>123</sup>`;

  return (
    <div>
      <div onClick={handleContainerClick} dangerouslySetInnerHTML={{ __html: text }} />
      <button onClick={handleClick}>Click me now!</button>
    </div>
  )
}

这个方法无需直接操作DOM，适合sup标签较多的场景，只要点击的是sup元素（或其子元素，可调整判断逻辑），都会触发事件。

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