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

Question

我有一个使用' react -lightbox- component‘依赖项的react组件。

http://jfcaiceo.github.io/react-lightbox-component/

我想阻止所有被命名为'decorative_pic‘的图片被最大化为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

我使用这些css规则成功地阻止了这些装饰性图像的点击：

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

但它只解决了问题的一部分。实际上，当你点击这些图片时，相应的lightbox并没有以正确的方式出现。

所以问题出在你点击lightbox里面的next按钮的时候。这些装饰性的图像在lightbox中看起来是最大化的，并且尊重默认的方式，我不想要它。

如何解决？也许会重写一些依赖方法？为了避免这些装饰图像被插入到最大化的灯箱组中？我不知道。

Answer 1

这个库没有可用的道具来传递函数，以便禁用某些图像的单击事件，如您所见的here。您也不能控制下一张和前一张图片的事件。

您可以做的是传递renderImagesFunc属性来覆盖渲染所有图像的函数。这会禁用onClick函数，但不会禁用next和prev事件。

<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' }
  ]},
  renderImageFunc={(idx, image, toggleLightbox, width, height) => (
    <img
      key={idx}
      src={!!image.thumbnail ? image.thumbnail : image.src}
      className="lightbox-img-thumbnail"
      style={{ width: width, height: height }}
      alt={image.title}
      onClick={
        image.src.includes("decorative_pic") ? null : toggleLightbox.bind(null, idx)
      }
    />
  )}
/>

演示：https://codesandbox.io/s/72w17w5z0j

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

Answer 2

也许你只需要在组件Lightbox之前渲染一个新的装饰性图像。

​

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

  const DecorativeImages = [
    "../images/decorative_pic.jpg",
    "../images/decorative_pic2.jpg",
    "../images/decorative_pic3.jpg"
  ]

    const LightBoxTest = () => (

      <div>

        <Lightbox images={[
          {
            src: '../images/pic_01.jpg'       
          },
          {
            src: '../images/pic_02.jpg'
          },
          {
            src: '../images/pic_03.jpg'        
          },
        ]} />
        {DecorativeImages.map(img => (
          <dvi>
            <img src={img}/>
          </dvi>
        ))
        })}
      </div>
    );

export default LightBoxTest

​