Javascript ReactJS-如何避免在Lightbox组件中最大化指定图像

我有一个react组件，它使用“react lightbox component”依赖项

我想防止所有名为“装饰图片”的图片被最大化为lightbox

这些图像应保留为缩略图，不能在Lightbox中最大化

默认情况下，其他图像应最大化

例如：

/*
    pic_01 -> should be maximized 
    pic_02 -> should be maximized 
    pic_03 -> should be maximized 
    decorative_pic -> forbidden to be maximized 
    decorative_pic -> forbidden to be maximized 
    decorative_pic -> forbidden to be maximized 
*/

组件反应代码：

import React, { Component } from 'react'    
import Lightbox from 'react-lightbox-component';    

    const LightBoxTest = () => (

      <div>

        <Lightbox images={[
          {
            src: '../images/pic_01.jpg'       
          },
          {
            src: '../images/pic_02.jpg'
          },
          {
            src: '../images/pic_03.jpg'        
          },
          {
            src: '../images/decorative_pic.jpg'        
          },
          {
            src: '../images/decorative_pic.jpg'        
          },
          {
          src: '../images/decorative_pic.jpg'  
          }
        ]} />
      </div>
    );

export default LightBoxTest

但它只解决了问题的一部分。实际上，当您单击这些图像时，相应的灯箱不会以正确的方式显示

因此，问题是当您单击lightbox内的“下一步”按钮时。这些装饰性图像在灯箱内部显示为最大化，并尊重默认方式，我不希望这样

---

如何解决？可能会覆盖某些依赖项方法？为了避免将这些装饰性图像插入到最大化的灯箱组中？我不知道

如您所见，此库没有可用的道具传递函数来禁用某些图像的单击事件。您都无法控制下一张和上一张图片的事件

您可以通过

renderImagesFunc

prop来覆盖渲染所有图像的函数。这将禁用

onClick

功能，但不会禁用next和prev事件

(
)}
/>

演示：

---

另一种选择是使用已经有更多控制功能的库作为道具，例如

可能您只需要在组件灯箱之前渲染新的装饰图像

import React，{Component}来自“React”
从“react Lightbox component”导入Lightbox；
常量装饰图像=[
“./图片/装饰图jpg”，
“./图像/装饰图片2.jpg”，
“./图片/装饰图片3.jpg”
]
常量LightBoxTest=（）=>(
{DecorativeImages.map（img=>(
))
})}
);
导出默认LightBoxTest

img[src*='decorative']{
  cursor:default;
  pointer-events: none;
}