html页面上点击图片放大

需求：

我这里是搭配wangeditor插件使用，然后用直接拿到wangeditor输入的内容用dangerouslySetInnerHTML直接渲染的html页面，页面的代码里面并没有<p><p/><img />这类标签

dangerouslySetInnerHTML渲染如下所示：

因为代码里面并不存在标签，也没办法给加事件，所以这里只能是用原生js去获取dom元素然后结合antd的弹框组件实现的，基本适用所有的html页面，因为不论什么只要可以在html页面展示 就一定可以通过dom来操作，虽然react不建议直接操作dom，但是现在我不想听他的建议我只想完成任务哈哈哈哈哈
接下来就是怎么做啦

document.addEventListener("click", handleClick);就是添加监听事件啦 一定别忘了document.removeEventListener("click", handleClick);要移除掉！！！
附上代码：

  useEffect(() => {
    function hasAncestorWithClass(el, className) {
      while ((el = el.parentElement) && el !== null) {
        if (el.classList && el.classList.contains(className)) {
          return true;
        }
      }
      return false;
    }

    function handleClick(event) {
      if (event.target.tagName.toUpperCase() === "IMG") {
        if (hasAncestorWithClass(event.target, "question-detail")) {
          setIsZoomed(true);
          setZoomedImageUrl(event.target.src);
        }
      }
    }

    document.addEventListener("click", handleClick);

    return () => {
      document.removeEventListener("click", handleClick);
    };
  }, []);

然后

先定义：

监听点击到类名下的img时，将弹窗状态变为true，将你点击的img元素的url赋值给定义好的zoomedImageUrl字段  此时，弹窗显示。

那么接下来就是弹框啦

弹框api可以直接看antd官网，想要什么样写什么样的弹框就好啦
最后就是激动人心的效果展示！

五月加班任务完成！终于能短暂的不用周六加班了 终于能休息啦