在React中让文本中的图片可以点击。

Question

我正在建立一个网站，从API调用中获取一篇博客文章。文章的主体只是html代码，混合了文字、图片，甚至是类似于 youtube 视频(它是用ckeditor在后面建立的)。一切都在按预期工作，但我想让图片可以点击，点击图片，会打开lightbox风格的模式。点击图片，将打开一个lightbox风格的模式。

我正在考虑从正文中提取所有的图片（如果有的话），然后在文章的底部做一个图库。但我认为，如果只是让图片可以点击，并打开dialag，而不在帖子中显示两次，那会更优雅。

一个响应的例子。

body: "<p>this is a text with some images: <img src='path/to/image1' /> and <img src='path/to/image2' /> how to make them clickable in React?</p>"

那个正文是这样呈现的。

<GridItem xs={12} sm={8} md={8}>
    <div dangerouslySetInnerHTML={{ __html: text }} />
</GridItem>

Answer 1

你可以在图片中使用onClick事件。

<img src='path/to/image2' onClick={() => {aFunction}} />

ps：如果你想，你可以添加一个 班级名称 拟将 游标：指针 也是。

Answer 2

我想这可能会对你有所帮助首先，你需要把博客文章的内容（从API调用返回的HTML）覆盖到一个包装div中，然后，你可以使用javascript获取博客文章的所有元素，就像下面的例子一样。

const elements = document.getElementById("wrapper").elements

现在，你可以迭代扔在博客文章中的所有元素，包括图片。

elements.forEach(item => {
   if (item.type == "img")
    // do this
})

我将在几分钟内编辑第二个代码示例