React中如何为dangerouslySetInnerHtml渲染的字符串添加onclick事件？

首先得明确：dangerouslySetInnerHTML 插入的DOM元素是脱离React虚拟DOM管控的，你没法直接通过React的方式给里面的<b>绑定onClick事件。下面给你两种靠谱的实现思路，优先推荐第一种更符合React设计理念的方案。

方案一：解析HTML字符串为React元素（推荐） #

核心思路是把API返回的HTML字符串拆成React能识别的元素节点，这样就能正常绑定事件、管理状态了。我们可以用浏览器原生的DOMParser来解析字符串，然后遍历节点生成React元素。

实现代码 #

首先写一个通用的解析函数，把HTML字符串转化为React元素数组：

function parseHtmlContent(htmlString, onBoldClick) {
  // 用DOMParser解析HTML字符串
  const parser = new DOMParser();
  const doc = parser.parseFromString(htmlString, 'text/html');
  const childNodes = Array.from(doc.body.childNodes);

  // 遍历节点，转化为React元素
  return childNodes.map((node, index) => {
    if (node.nodeType === Node.TEXT_NODE) {
      // 文本节点直接返回
      return <span key={index}>{node.textContent}</span>;
    } else if (node.nodeType === Node.ELEMENT_NODE && node.tagName === 'B') {
      // <b>标签转化为带点击事件的React元素
      return (
        <b 
          key={index} 
          onClick={(e) => onBoldClick(e.target.textContent)}
          style={{ cursor: 'pointer', color: '#1890ff' }}
        >
          {node.textContent}
        </b>
      );
    }
    // 其他未知标签默认返回文本内容（可根据需求扩展）
    return <span key={index}>{node.textContent}</span>;
  });
}

然后在你的组件里使用这个函数：

import React, { Component } from 'react';

class ApiContentRenderer extends Component {
  state = {
    isClicked: false,
    targetText: ''
  };

  handleBoldClick = (text) => {
    // 这里执行你的状态操作，比如记录点击内容、发起请求等
    this.setState({
      isClicked: true,
      targetText: text
    });
    console.log(`点击了加粗内容：${text}`);
  };

  render() {
    // 模拟API返回的内容
    const apiResponse = 'Money received for order ID <b>123</b>';
    // 解析为React元素
    const renderedContent = parseHtmlContent(apiResponse, this.handleBoldClick);

    return (
      <div>
        {renderedContent}
        {this.state.isClicked && (
          <p style={{ marginTop: '10px' }}>
            你点击了：<strong>{this.state.targetText}</strong>
          </p>
        )}
      </div>
    );
  }
}

export default ApiContentRenderer;

为什么推荐这个方案？ #

• 完全利用React的虚拟DOM和事件系统，不需要手动操作原生DOM
• 状态管理更安全，避免内存泄漏风险
• 可扩展性强，如果后续API返回其他需要处理的标签，直接扩展解析逻辑即可

方案二：手动绑定原生DOM事件（不推荐，仅作备选） #

如果因为某些原因必须用dangerouslySetInnerHTML，可以在组件挂载/更新时手动给<b>标签添加原生事件监听。

实现代码 #

import React, { Component } from 'react';

class RawHtmlRenderer extends Component {
  state = {
    clickedText: ''
  };

  containerRef = React.createRef();

  handleBoldClick = (e) => {
    this.setState({ clickedText: e.target.textContent });
  };

  bindBoldEvents = () => {
    // 先移除旧的事件监听，避免重复绑定
    const oldElements = this.containerRef.current.querySelectorAll('b');
    oldElements.forEach(el => el.removeEventListener('click', this.handleBoldClick));
    
    // 给新的<b>标签绑定事件
    const newElements = this.containerRef.current.querySelectorAll('b');
    newElements.forEach(el => el.addEventListener('click', this.handleBoldClick));
  };

  componentDidMount() {
    this.bindBoldEvents();
  }

  componentDidUpdate(prevProps) {
    // 内容更新时重新绑定事件
    if (prevProps.htmlContent !== this.props.htmlContent) {
      this.bindBoldEvents();
    }
  }

  componentWillUnmount() {
    // 卸载前移除事件监听，避免内存泄漏
    const elements = this.containerRef.current.querySelectorAll('b');
    elements.forEach(el => el.removeEventListener('click', this.handleBoldClick));
  }

  createMarkup = (value) => {
    return { __html: value };
  };

  render() {
    return (
      <div ref={this.containerRef} dangerouslySetInnerHTML={this.createMarkup(this.props.htmlContent)} />
    );
  }
}

// 使用示例
<RawHtmlRenderer htmlContent="Money received for order ID <b>123</b>" />

注意事项 #

• 必须手动管理事件的绑定和移除，否则容易出现内存泄漏
• React不会跟踪这些原生DOM元素，状态更新时需要手动处理重新绑定
• 代码复杂度更高，维护成本大

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