React中使用dangerouslySetInnerHTML插入的onClick事件不触发如何解决？

根本原因 #

• React的onClick属于合成事件，并不会被解析为原生DOM的事件属性，dangerouslySetInnerHTML只会渲染纯HTML内容，不会做合成事件的绑定处理，所以你写在字符串里的onClick不会生效。
• 如果你想要绑定原生事件，HTML里对应的属性应该是全小写的onclick，且属性值是可执行的JS字符串，而不是箭头函数表达式，不过这种方式的执行作用域是全局，会有很多限制。

解决方案1：渲染后手动绑定事件（推荐，更安全可控） #

思路是先渲染HTML结构，再通过DOM选择器找到对应元素，手动绑定原生事件，你可以给需要绑定事件的元素加个自定义标识属性，方便选择：

// 用户传入的HTML字符串，给需要绑定点击的元素加标识
const html = `<div data-click-handler="logInput">Click me</div>`;

React组件实现示例：

import { useEffect, useRef } from 'react';

function CustomHtmlBlock({ html }) {
  const containerRef = useRef(null);

  // 预定义允许用户触发的事件处理函数，避免执行任意用户代码的安全风险
  const handlerMap = {
    logInput: (e) => {
      console.log(e.target);
      // 可自行扩展允许的业务逻辑
    }
  };

  useEffect(() => {
    if (!containerRef.current) return;
    // 先清空之前绑定的事件，避免重复绑定
    const prevElements = containerRef.current.querySelectorAll('[data-click-handler]');
    prevElements.forEach(el => {
      const handlerName = el.dataset.clickHandler;
      if (handlerMap[handlerName]) {
        el.removeEventListener('click', handlerMap[handlerName]);
      }
    });

    // 绑定新的事件
    const elements = containerRef.current.querySelectorAll('[data-click-handler]');
    elements.forEach(el => {
      const handlerName = el.dataset.clickHandler;
      if (handlerMap[handlerName]) {
        el.addEventListener('click', handlerMap[handlerName]);
      }
    });
  }, [html]);

  return <div ref={containerRef} dangerouslySetInnerHTML={{ __html: html }} />;
}

这个方案的优势是你可以完全控制允许执行的逻辑，不会有XSS安全风险。

解决方案2：改用原生onclick属性（不推荐，安全风险高） #

如果你一定要让用户直接在HTML字符串里写事件逻辑，可以把onClick改成原生的onclick，属性值写可执行的JS字符串：

const html = `<div onclick="console.log(this)">Click me</div>`;

⚠️ 注意：这个方案的逻辑是在全局作用域执行的，用户可以写任意恶意代码，存在极高的XSS安全风险，除非你完全信任所有编辑内容的用户，否则不要使用。

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