react中dangerouslySetInnerHTML的标签绑定事件

react中dangerouslySetInnerHTML的标签绑定事件

项目需求：采用富文本编辑器编辑的一段字符串格式的html需进行显示，使用dangerouslySetInnerHTML进行显示，但是这段HTML中包含img标签，希望将这个img标签不要直接显示，而是处理成a标签，点击时再进行图片显示，点击浏览器任意位置，图片不显示。

代码

import React, {useState} from "react";
// reactstrap components
import {Modal} from "reactstrap";

class ImgHandle extends React.Component {

  constructor(props){
    super(props);
    this.state = {
      content: '<p><img src="https://scpic.chinaz.net/files/pic/pic9/202111/apic36470.jpg"></p>',
      imgModal: false,
      imgSrc: ''
    };
  }
  componentDidMount(){
    document.addEventListener('click', (e) => {
      if(e.target.tagName === 'A'&&e.target.dataset.type === 'picture') {
        // a标签被点击了
        this.toggleImage(e.ta