React:如何在dangerouslySetInnerHTML的img标签上添加onClick()

在 React 中，dangerouslySetInnerHTML 主要用于直接插入 HTML 内容，但它不会解析或处理其中的事件处理器（如 onClick）。因此，如果你想在通过 dangerouslySetInnerHTML 插入的 <img> 标签上添加点击事件，需要采用其他方法。以下是几种常见的解决方案：

方法一：使用包裹元素并添加事件监听器

避免使用 dangerouslySetInnerHTML：尽量通过 React 组件的方式来渲染内容，这样可以更好地控制事件处理。
包裹图片并添加点击事件：

import React from 'react';

const ImageWithClick = ({ htmlContent, onClick }) => {
  const handleImageClick = (event) => {
    // 检查点击的目标是否是 img 标签
    if (event.target.tagName.toLowerCase() === 'img') {
      onClick(event);
    }
  };

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

// 使用示例
const App = () => {
  const handleClick = () => {
    alert('图片被点击了！');
  };

  const html = '<p>这是一些文本。<img src="image.jpg" alt="示例图片" /></p>';

  return <ImageWithClick htmlContent={html} onClick={handleClick} />;
};

export default App;

方法二：使用 `ref` 和 DOM 操作

如果你确实需要使用 dangerouslySetInnerHTML 并且想要添加事件监听器，可以通过 ref 获取 DOM 元素，然后在组件挂载后手动添加事件监听器。

import React, { useEffect, useRef } from 'react';

const ImageClickHandler = ({ htmlContent }) => {
  const containerRef = useRef(null);

  useEffect(() => {
    const handleClick = (event) => {
      if (event.target.tagName.toLowerCase() === 'img') {
        console.log('图片被点击了！');
        // 在这里处理点击事件
      }
    };

    const container = containerRef.current;
    if (container) {
      container.addEventListener('click', handleClick);
    }

    return () => {
      if (container) {
        container.removeEventListener('click', handleClick);
      }
    };
  }, []);

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

// 使用示例
const App = () => {
  const html = '<p>这是一些文本。<img src="image.jpg" alt="示例图片" /></p>';

  return <ImageClickHandler htmlContent={html} />;
};

export default App;

方法三：解析 HTML 并转换 `<img>` 标签

如果 HTML 内容是动态生成的，并且你需要对其中的 <img> 标签添加事件，可以考虑解析 HTML 字符串，将 <img> 标签替换为带有事件处理器的 React 组件。

import React from 'react';
import DOMPurify from 'dompurify';

const parseImages = (html) => {
  const parser = new DOMParser();
  const doc = parser.parseFromString(html, 'text/html');
  const images = doc.querySelectorAll('img');

  images.forEach((img) => {
    const onClick = () => {
      console.log(`图片 ${img.src} 被点击了！`);
    };

    // 创建一个 React 组件来替代原始 img 标签
    const imgWrapper = document.createElement('span');
    imgWrapper.setAttribute('data-src', img.src);
    imgWrapper.setAttribute('data-alt', img.alt);
    img.parentNode.replaceChild(imgWrapper, img);
  });

  return DOMPurify.sanitize(doc.body.innerHTML);
};

const ParsedContent = ({ htmlContent }) => {
  const processedHtml = parseImages(htmlContent);

  return <div dangerouslySetInnerHTML={{ __html: processedHtml }} />;
};

// 使用示例
const App = () => {
  const html = '<p>这是一些文本。<img src="image.jpg" alt="示例图片" /></p>';

  return <ParsedContent htmlContent={html} />;
};

export default App;

注意：