React中dangerouslySetInnerHTML渲染内容绑定onClick不生效求助

• React中所有on*开头的属性都是合成事件，仅在React的JSX渲染流程中会被注册为事件监听器。通过dangerouslySetInnerHTML插入的原生HTML字符串里的onClick只会被识别为普通HTML属性，不会被React绑定为事件回调。
• 你直接将hello函数嵌入HTML字符串时，最终生成的字符串里的onClick值是函数的序列化结果（也就是function hello(event) { ... }这类文本），完全无法被浏览器识别为可执行的事件逻辑。

方案1：使用事件委托（最适合动态HTML场景） #

给外层包裹的容器添加点击事件，通过判断点击目标匹配对应的元素即可，代码示例：

import "./styles.css";
import React from "react";

export default function App() {
  const hello = (event) => {
    // 可自定义属性（如data-type="trigger"）做更精准的匹配
    if(event.target.tagName === 'A' && event.target.getAttribute('href') === '#') {
      event.preventDefault();
      alert("hello", event.target);
    }
  };
  const displayUrl = () => {
    const str = `<a href="#">Test</a>`;
    return <div onClick={hello} dangerouslySetInnerHTML={{ __html: str }} />;
  };

  return (
    <div className="App">
      <React.Fragment>{displayUrl()}</React.Fragment>
    </div>
  );
}

该方案性能开销极低，无论动态插入多少目标元素，仅需绑定一次外层事件即可。

方案2：直接使用JSX渲染（内容可控时优先选择） #

如果你的HTML结构是自行可控的，不需要依赖外部返回的HTML片段，完全可以放弃dangerouslySetInnerHTML，直接返回JSX即可正常绑定事件：

const displayUrl = () => {
  return <div><a onClick={hello} href="#">Test</a></div>;
};

该方案完全符合React设计规范，也不会引入XSS安全风险。

方案3：手动绑定原生事件（不推荐） #

如果必须使用dangerouslySetInnerHTML也不想用事件委托，可以在组件挂载后通过原生DOM API手动绑定事件，注意要在组件卸载时清理事件避免内存泄漏：

import "./styles.css";
import React, { useEffect, useRef } from "react";

export default function App() {
  const containerRef = useRef(null);
  const hello = (event) => {
    alert("hello", event.target);
  };

  useEffect(() => {
    const aEl = containerRef.current?.querySelector('a[href="#"]');
    if(aEl) {
      aEl.addEventListener('click', hello);
    }
    // 卸载时清理事件
    return () => {
      if(aEl) {
        aEl.removeEventListener('click', hello);
      }
    }
  }, []);

  const displayUrl = () => {
    const str = `<a href="#">Test</a>`;
    return <div ref={containerRef} dangerouslySetInnerHTML={{ __html: str }} />;
  };

  return (
    <div className="App">
      <React.Fragment>{displayUrl()}</React.Fragment>
    </div>
  );
}

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