新公司项目react函数式组件中，使用marked.js插件将服务端返回的Markdown字符串转化成html（使用<div dangerouslySetInnerHTML = {{_html:htmlText}}）渲染到上级组件中。
问题：在返回的img图片渲染到页面时，想实现点击图片预览的功能。尝试了两种方案不可行，急求大神指导~
本人查阅了两种结局方案：
1、参考http://www.taodudu.cc/news/show-4355278.html?action=onClick
没有成功。不确定点击事件在函数式子组件中何时定义
2、因为项目使用了antd插件，想将其中的图片img标签换成antd图片组件Image就可以展示加预览。但是在htmlText处理了到<div dangerouslySetInnerHTML = {{_html:htmlText}}）无效，会自动变成img
AI BotBETA在React中，如果你正在使用dangerouslySetInnerHTML来插入Markdown转换后的HTML，那么直接在这个HTML中添加事件处理器可能会遇到问题，因为dangerouslySetInnerHTML不会将React元素转换为DOM元素。
一个可能的解决方案是使用react-interactivity库，它允许你处理像点击和悬停这样的交互事件。首先，你需要安装这个库：
极客观点
项目管理
HarmonyOS
npm install react-interactivity然后，你可以使用Interactivity组件来包装你的图片，并添加一个点击事件处理器：
import React from 'react';
import Interactivity from 'react-interactivity';
function ImagePreviewer(props) {
return (
<Interactivity event="click" handler={props.onClick}>
<img src={props.src} alt={props.alt} />
</Interactivity>
);
}在这个例子中，event属性是你想要监听的事件（在这个例子中是"click"），而handler属性则是当该事件被触发时调用的函数。然后你可以像这样使用你的ImagePreviewer组件：
<ImagePreviewer src="your-image-source" alt="image description" onClick={this.handleImageClick} />在这个例子中，当图片被点击时，handleImageClick函数将被调用。
注意，这个解决方案需要你能够控制并信任你正在渲染的HTML。如果你不能保证HTML的安全性，那么使用dangerouslySetInnerHTML可能会导致XSS攻击。
4 回答1.7k 阅读
2 回答2.6k 阅读✓ 已解决
2 回答1.1k 阅读✓ 已解决
2 回答2.6k 阅读
1 回答996 阅读✓ 已解决
1 回答971 阅读✓ 已解决
1 回答708 阅读✓ 已解决