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转换为背景图像。

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

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

Answer 1

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

    YourEditText.addTextChangedListener(new TextWatcher() {
        @Override
        public void beforeTextChanged(CharSequence s, int start, int count, int after) {

        }

        @Override
        public void onTextChanged(CharSequence s, int start, int before, int count) {

            int len=s.toString().length();

            if (before == 0 && (len == 4 || len == 9 || len == 14 ))
                YourEditText.append(" ");
        }

        @Override
        public void afterTextChanged(Editable s) {


        }
    });

在这里，您可以在render方法中为缩略图手动绑定操作，如果您遇到这种情况，则有一个正则表达式可以检查图像文件src是否包含单词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;和它是否{{1} }在decorative事件处理程序中为null，否则图像将打开。

LE

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

returns

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

1 个答案: