模态与图像幻灯片反应

Question

您好，我正在尝试为下一张图片实现带幻灯片的模态。我正在使用 unsplash api 来获取图像。

我面临的问题是每当我尝试单击网格中的随机图像时，它只显示模式中的第一张图像。

这是我设置图像和模式功能的实现。我正在使用 react-modal 包来设置我的 Modal。

imageList = 包含图像数据的对象数组

url = 包含图像 url 的对象。

export default function Images({ imageList, url, id }) {
    const [modalIsOpen, setModalIsOpen] = useState(false);
    const [current, setCurrent] = useState(0);

    const length = imageList.length;

    function openModal() {
        setModalIsOpen(true);
    }
    function closeModal() {
        setModalIsOpen(false);
    }

    const nextSlide = () => {
        setCurrent(current === length - 1 ? 0 : current + 1);
    };

    const prevSlide = () => {
        setCurrent(current === 0 ? length - 1 : current - 1);
    };

    if (!Array.isArray(imageList) || imageList.length <= 0) {
        return null;
    }
    return (
        <div>
            <img onClick={openModal} key={id} src={url.urls.thumb} alt='' />
            <Modal
                ariaHideApp={false}
                closeTimeoutMS={200}
                style={customStyles}
                isOpen={modalIsOpen}
                onRequestClose={closeModal}
                contentLabel='Image modal'
            >
                <AiOutlineArrowLeft
                    className='left-arrow'
                    onClick={prevSlide}
                />
                <AiOutlineArrowRight
                    className='right-arrow'
                    onClick={nextSlide}
                />
                {imageList.map((image, id) => {
                    return (
                        <div
                            className={
                                id === current ? 'slide active' : 'slide'
                            }
                            key={id}
                        >
                            {id === current && (
                                <img
                                    alt=''
                                    className='image'
                                    src={image.urls.small}
                                />
                            )}
                        </div>
                    );
                })}
            </Modal>
        </div>
    );
}

在此先感谢您的帮助。

Answer 1

您应该通过点击图像来设置当前图像索引。

<img onClick={()=>openModal(id)=} key={id} src={url.urls.thumb} alt='' />

function openModal(id) {
    setCurrent(id);
    setModalIsOpen(true);
}

或者使用 props 中的 id / index

const [current, setCurrent] = useState(id);

Answer 2

通过传递图像 id 设置当前

<img onClick={()=>openModal(id)} key={id} src={url.urls.thumb} alt='' />

function openModal(id) {
    setCurrent(id);
    setModalIsOpen(true);
}

模态与图像幻灯片反应

Modal with image slideshow with react

javascript

image

modal-dialog

slideshow

reactjs