react.js - react中使用marked.js插件无法实现图片放大预览问题?

Question

新公司项目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

Answer 1

在React中，如果你正在使用dangerouslySetInnerHTML来插入Markdown转换后的HTML，那么直接在这个HTML中添加事件处理器可能会遇到问题，因为dangerouslySetInnerHTML不会将React元素转换为DOM元素。

一个可能的解决方案是使用react-interactivity库，它允许你处理像点击和悬停这样的交互事件。首先，你需要安装这个库：

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攻击。