React中处理API返回HTML的DOM事件绑定最优方案

核心思路是事件委托：不用给每个动态生成的元素单独绑定事件，而是把事件绑定到React组件的根容器上，借助事件冒泡触发处理逻辑，这样就能避免重复编写所有jQuery事件代码。

方案1：复用原有jQuery逻辑（最小改动） #

如果你的旧代码大量依赖jQuery，直接复用原有事件逻辑是最高效的，只需要结合React的生命周期来绑定/解绑事件：

import React, { Component } from 'react';
import $ from 'jquery';

class DynamicHtmlContainer extends Component {
  constructor(props) {
    super(props);
    this.containerRef = React.createRef();
    // 直接复用原有事件处理函数
    this.handleSpanClick = function(e) {
      $(this).text('Span clicked');
    };
  }

  componentDidMount() {
    // 把事件委托绑定到组件的容器节点上，而非全局document
    $(this.containerRef.current).on('click', '.span', this.handleSpanClick);
  }

  componentDidUpdate(prevProps) {
    // 如果后端返回的HTML会动态更新，先解绑再重新绑定
    if (prevProps.htmlContent !== this.props.htmlContent) {
      $(this.containerRef.current).off('click', '.span', this.handleSpanClick);
      $(this.containerRef.current).on('click', '.span', this.handleSpanClick);
    }
  }

  componentWillUnmount() {
    // 组件卸载时必须解绑事件，防止内存泄漏
    $(this.containerRef.current).off('click', '.span', this.handleSpanClick);
  }

  render() {
    // 用dangerouslySetInnerHTML插入后端返回的HTML
    return (
      <div ref={this.containerRef} dangerouslySetInnerHTML={{ __html: this.props.htmlContent }} />
    );
  }
}

这种方式几乎不用修改原有jQuery事件代码，只是把事件绑定的目标从全局改成了React组件的容器，既保留了原有逻辑，又不会污染全局事件。

方案2：用React原生事件替代jQuery（逐步脱离依赖） #

如果想慢慢去掉jQuery依赖，可以直接用React的原生事件委托，在容器上绑定事件后，判断目标元素的标识来执行对应逻辑：

import React, { useCallback } from 'react';

function DynamicHtmlContainer({ htmlContent }) {
  const handleContainerClick = useCallback((e) => {
    // 判断点击的元素是否是目标类名
    if (e.target.classList.contains('span')) {
      e.target.textContent = 'Span clicked';
    }
    // 其他元素的事件逻辑可以在这里扩展，比如判断ID或其他类名
    // if (e.target.id === 'xxx') { ... }
  }, []);

  return (
    <div 
      dangerouslySetInnerHTML={{ __html: htmlContent }}
      onClick={handleContainerClick}
    />
  );
}

这种方式完全不需要jQuery，用React原生事件就能实现，逻辑更统一，也符合React的开发习惯。

总结 #

• 若原有代码大量依赖jQuery，选方案1，改动最小，直接复用事件逻辑；
• 若想逐步迁移到React原生写法，选方案2，摆脱jQuery依赖，代码更轻量。

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