ReactJS - 隐藏具有特定背景图像的 div

Question

我有这个 React 组件

    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>
    );

这种依赖 'react-lightbox-component' 呈现两个 css 类：一个用于图像缩略图，另一个用于每个放大的图像：“lightbox-image”类。当图片点击放大后，会变成Div，scr变成background-image。

如何为所有在其背景图像中包含“decorative.jpg”的图像删除此类？

我想这样做是因为我不希望这些名为“decorative.jpg”的图像被放大。我只希望它们作为缩略图。我该如何解决？

Answer 1

使用他们的示例，为了禁用单击缩略图，您可以使用以下代码

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

class LightBoxTest extends Component {
  constructor(props) {
    super(props);
    this.state = {
      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'  
          }
       ]
    }
  }

  render() {
    const { images } = this.state;
    return (
      <div>
        <Lightbox
          images={images}
          renderImageFunc={(idx, image, toggleLightbox, width, height) => {
            let onClick = () => null;
            const patt = /decorative/g;
            if(!patt.test(image.src)) onClick = toggleLightbox.bind(null, idx);
            return (
              <img
                key={idx}
                src={image.src}
                style={{width: width, height: height}}
                onClick={onClick} />
            )
          }}/>
      </div>
    )
  }
}

export default LightBoxTest;

在这里，在渲染方法中，您可以手动绑定缩略图的操作，在您的情况下，有一个正则表达式检查图像文件 src 是否包含单词decorative，如果它包含returns null 在onClick 事件处理程序，否则将打开图像。

LE

我已经修改了第一个示例以满足您的需求...

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

class LightBoxTest extends Component {
  constructor(props) {
    super(props);
    this.state = {
      images: [
        {
          src: '../images/pic_01.jpg'
        },
        {
          src: '../images/pic_02.jpg'
        },
        {
          src: '../images/pic_03.jpg'
        }
      ]
    }
  }

  render() {
    const { images } = this.state;
    return (
      <div style={{ display: 'flex', flexDirection:'row' }}>
        <div>
          <Lightbox
            images={images}
            thumbnailWidth='150px'
            thumbnailHeight='150px'
          />
        </div>
        <div>
          <img src="../images/decorative_pic.jpg" style={{ width: '150px', height: '150px' }} />
          <img src="../images/decorative_pic.jpg" style={{ width: '150px', height: '150px' }} />
          <img src="../images/decorative_pic.jpg" style={{ width: '150px', height: '150px' }} />
        </div>
      </div>
    )
  }
}

export default LightBoxTest;