Gatsby / React：使用<ReactIntense>元素自动替换某个<div>的第n代后代的所有<img>元素

Question

目标：

创建一个相册，使您可以使用react-photo-gallery和react-intense放大大图像

可能相关：

图库将成为Gatsby前端网站的一部分，该网站由Strapi CMS管理，并托管在Ubuntu 18.04 VPS上，但目前我正在Windows Linux子系统（Ubuntu）上进行开发

我需要帮助的过程：

自动找到所有<img>元素，它们是类名<div>的{​​{1}}的第n代后代，并动态地将它们替换为.react-photo-gallery--gallery元素。

<ReactIntense>标签生成的html示例：

<Gallery>

我想用<div class="react-photo-gallery--gallery"> <div style="position: relative; height: 1976.9px;"> <img style="style" src="src" width="width" height="height"> <img style="style" src="src" width="width" height="height"> <img style="style" src="src" width="width" height="height"> </div> </div> 标签自动替换每个<img>元素，并将ReactIntense设置为src时的样子，但是我可以不知道怎么做。

我尝试过的

我尝试使用下面找到的递归函数包装图库，并用img元素替换其img后代，但是我无法使其正常工作。我也尝试了许多其他事情，并四处寻找相关示例或文档。下面的函数来自another question on StackOverflow。

ReactIntense

上面的代码似乎什么也不做，我被卡住了。

有人能指出我一些相关资源，还是提供解决方案？ 预先感谢。