如何让按钮显示一个图像，而不是数组中的所有图像

Question

我正在使用react-image-lighbox npm包https://www.npmjs.com/package/react-image-lightbox，并试图让它与我的自定义代码一起工作。我有一个图库，当你点击数组中的一个按钮时，我正在尝试让它在灯箱中显示图像。此时，当你点击任何一个按钮时，它会同时打开一个数组中的所有按钮。我需要对它进行过滤，以便它只打开你点击的图像，而不是所有的图像。

目前，我正在尝试使用filter和if语句来尝试找到解决方案。

通过道具传递的一些状态的示例。

portfolioContent: [
            {
                id: uuidv1(),
                imgURL: image01,
                text: 'Copy 1',
                section: 1,
                work:
                    'https://images2.minutemediacdn.com/image/upload/c_crop,h_1193,w_2121,x_0,y_64/f_auto,q_auto,w_1100/v1565279671/shape/mentalfloss/578211-gettyimages-542930526.jpg'
            },
            {
                id: uuidv1(),
                imgURL: image02,
                text: 'Copy 2',
                section: 1,
                work:
                    'https://images2.minutemediacdn.com/image/upload/c_crop,h_1193,w_2121,x_0,y_175/f_auto,q_auto,w_1100/v1554921998/shape/mentalfloss/549585-istock-909106260.jpg'
            }
]

<Main portfolio={this.state.portfolioContent} />
<PortfolioWork work={this.props.portfolio} section="1" />

import React, { Component, Fragment } from 'react';
import Lightbox from 'react-image-lightbox';
import 'react-image-lightbox/style.css'; // This only needs to be imported once in your app

const images = [
  '//placekitten.com/1500/500',
  '//placekitten.com/4000/3000',
  '//placekitten.com/800/1200',
  '//placekitten.com/1500/1500',
];

export default class LightboxExample extends Component {
  constructor(props) {
    super(props);

    this.state = {
      photoIndex: 0,
      isOpen: false,
    };
  }

  render() {
    const { photoIndex, isOpen } = this.state;

    return (
        <Fragment>
        {this.props.work.map(portfolio => {
            if (portfolio.section === Number(this.props.section)) {
                return (
                    <div className="portfolio-content" key={portfolio.id}>
                        <img src={portfolio.imgURL} alt={portfolio.text} />
                        <p>{portfolio.text}</p>
                        <a href={portfolio.work}>See work</a>
                        <button type="button" onClick={() => this.setState({ isOpen: true })}>
          Open Lightbox
        </button>

        {isOpen && (
          <Lightbox
            mainSrc={portfolio.imgURL}
            nextSrc={images[(photoIndex + 1) % images.length]}
            prevSrc={images[(photoIndex + images.length - 1) % images.length]}
            onCloseRequest={() => this.setState({ isOpen: false })}
            onMovePrevRequest={() =>
              this.setState({
                photoIndex: (photoIndex + images.length - 1) % images.length,
              })
            }
            onMoveNextRequest={() =>
              this.setState({
                photoIndex: (photoIndex + 1) % images.length,
              })
            }
          />
        )}

                    </div>
                );
            }
        })}
    </Fragment>
    );
  }
}

单击按钮将在lightbox中打开该图像。目前，如果你点击任何一个按钮，它就会同时打开一个灯箱中的所有图像。

Answer 1

我想通了。所以我在主App.js文件中创建了一个函数，它接受一个对象。然后我通过props将该函数传递给组件，并将其附加到一个单击事件上。这样当用户点击该按钮时，该按钮就被分配给其相应的对象。然后，我将该对象设置为state，并将所选图像对象设置为显示的lightbox图像的主要来源。

import React, { Component, Fragment } from 'react';
import Lightbox from 'react-image-lightbox';
import 'react-image-lightbox/style.css'; // This only needs to be imported once in your app
​
export default class LightboxExample extends Component {
    constructor(props) {
        super(props);
​
        this.state = {
            isOpen: false
        };
    }
​
    render() {
        const { isOpen } = this.state;
​
        return (
            <Fragment>
                {this.props.work.map(portfolio => {
                    if (portfolio.section === Number(this.props.section)) {
                        return (
                            <div key={portfolio.id}>
                                <div className="portfolio-content">
                                    <img src={portfolio.imgURL} alt={portfolio.text} />
                                    <p>{portfolio.text}</p>
                                    <button
                                        type="button"
                                        onClick={() => {
                                            this.setState({ isOpen: true });
                                            this.props.onImageSelect(portfolio);
                                        }}
                                    >
                                        See work
                                    </button>
                                </div>
                                <div>
                                    {isOpen && (
                                        <Lightbox
                                            mainSrc={this.props.selectedImage.imgURL}
                                            onCloseRequest={() => this.setState({ isOpen: false })}
                                        />
                                    )}
                                </div>
                            </div>
                        );
                    }
                })}
            </Fragment>
        );