Javascript 如何获得一个按钮来显示一个图像而不是一个数组中的所有图像

我正在使用react image lighbox npm包，并试图让它与我的自定义代码一起工作。我有一个画廊，我试图让它显示一个图像在一个灯箱，当你点击一个按钮在阵列。当你点击任何一个按钮时，它会同时打开一个数组中的所有按钮。我需要对其进行过滤，以便它只打开您单击的图像，而不是所有图像

目前，我正在使用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" />

portfolio内容：[
{
id:uuidv1（），
imgURL:image01，
文本：“复制1”，
第1节：，
工作：
'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，
文本：“复制2”，
第1节：，
工作：
'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'
}
]

import React，{Component，Fragment}来自'React'；
从“react image Lightbox”导入Lightbox；
导入“react image lightbox/style.css”；//这只需要在应用程序中导入一次
常量图像=[
“//placekitten.com/1500/500”，
“//placekitten.com/4000/3000”，
“//placekitten.com/800/1200”，
“//placekitten.com/1500/1500”，
];
导出默认类LightboxExample扩展组件{
建造师（道具）{
超级（道具）；
此.state={
感光指数：0，
伊索彭：错，
};
}
render（）{
常数{photoIndex，isOpen}=this.state；
返回(
{this.props.work.map（公文包=>{
if（portfolio.section==Number（this.props.section））{
返回(
{portfolio.text}

this.setState（{isOpen:true}}>
打开灯箱
{isOpen&&(
this.setState（{isOpen:false}）
onMovePrevRequest={（）=>
这是我的国家({
感光指数：（感光指数+图像.length-1）%images.length，
})
}
onMoveNextRequest={（）=>
这是我的国家({
感光指数：（感光指数+1）%images.length，
})
}
/>
)}
);
}
})}
);
}
}

---

单击按钮可在灯箱中打开该图像。现在，如果你点击任何一个按钮，它会在一个lighbox中同时打开所有图像。

我猜出来了。因此，我在主App.js文件中创建了一个函数，其中包含一个对象。然后我通过道具将该函数传递给组件，并将其附加到单击事件。因此，当用户单击按钮时，它被指定给相应的对象。然后，我将该对象设置为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>
        );

import React，{Component，Fragment}来自'React'；
从“react image Lightbox”导入Lightbox；
导入“react image lightbox/style.css”；//这只需要在应用程序中导入一次
​
导出默认类LightboxExample扩展组件{
建造师（道具）{
超级（道具）；
​
此.state={
伊索彭：错
};
}
​
render（）{
const{isOpen}=this.state；
​
返回(
{this.props.work.map（公文包=>{
if（portfolio.section==Number（this.props.section））{
返回(
{portfolio.text}

{
this.setState（{isOpen:true}）；
this.props.onImageSelect（公文包）；
}}
>
看工作
{isOpen&&(
this.setState（{isOpen:false}）
/>
)}
);
}
})}
);

您必须管理isOpen标志数组，并将数组中的索引设置为true，将所有其他设置为false，然后重建状态感谢您的帮助，我找到了另一个有效的解决方案，我相信您的解决方案也会有效。当时实施起来更难。

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