Question

你好，我对react-image-gallery有一点麻烦。

在ImageGallery组件中，我传递this.state.currentImage和this.state.currentImage之类的startIndex值取决于要单击的照片的数量。例如，当我们单击数字4的照片时，this.state.currentImage链接到数字4上，并且对我来说是正确的，但是在<imageGallery/>中，组件startIndex不能像我应该的那样工作。我的模态总是从第一个图像索引[0]开始。

import React, { Component } from "react";
import { Modal, ModalClose, ModalBody } from "react-modal-bootstrap";
import ImageGallery from "react-image-gallery";
import "./index.css";

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

    var data = { title: "photos", images: [], ...props.data };
    this.state = {
        open: false,
        showPlayButton: true,
        showGalleryPlayButton: false,
        showFullscreenButton: true,
        showGalleryFullscreenButton: false,
        currentImage: 0,
        test: 0,
        player: [],
        data: data
    };
    console.log("Images: ", this.state.data);
    this.openLightbox = this.openLightbox.bind(this);
    this._renderImages = this._renderImages.bind(this);
    this._onSlide = this._onSlide.bind(this);
    this._onReady = this._onReady.bind(this);
}

state = {
    isOpen: false
};

openModal = event => {
    console.log(event.target);
    this.setState({ isOpen: true });
};

openLightbox(index, event) {
    // console.log('index',index);
    event.preventDefault();
    // this.setState({
    //  isOpen: true,
    //  currentImage: index
    // });
    this.setState(
        prevState => {
            return {
                currentImage: index,
                isOpen: true
            };
        },
        () => {
            console.log("currentImage", this.state.currentImage);
            console.log("event", index);
        }
    );
}

hideModal = () => {
    this.setState({ isOpen: false });
};

_renderImages(item) {
    return (
        <div className="images image-gallery-image">
            <div className="images image-wrapper">
                <h1>{this.state.currentImage}</h1>
                <img src={item.img} alt="" className="images multimedia_image" />
                <span className="images image-gallery-description">{item.desc}</span>
            </div>
        </div>
    );
}

_onReady(event) {
    const player = this.state.player;
    player.push(event.target);
    this.setState({
        player: player
    });
}

_onSlide() {
    this.state.data.images.forEach(player => {});
}

handleImageLoad(event) {
    console.log("Image loaded ", event.target);
}

render() {
    var openLightbox = this.openLightbox;
    var currentImage = this.state.currentImage;
    const number = this.state.currentImage;

    return (
        <div className="images row">
            <div className="images col-xs-12 col-sm-12 col-md-12 col-lg-12">
                <div className="images title">{this.state.data.title}</div>
            </div>
            <div className="images col-xs-12 col-sm-12 col-md-12 col-lg-12">
                <div className="images row">
                    {this.state.data.images.map((object, i) => {
                        let backgroundImage = {
                            backgroundImage: "url(" + object.thumbnail + ")",
                            top: 0,
                            right: 0,
                            left: 0,
                            bottom: 0,
                            position: "absolute",
                            flex: 1,
                            backgroundPosition: "center",
                            backgroundSize: "cover",
                            zIndex: 1
                        };
                        return (
                            <div
                                className="images item col-xs-4 col-sm-4 col-md-3 col-lg-3 images__single-item"
                                key={i}
                            >
                                <div
                                    className="images multimedia_button"
                                    onClick={e => this.openLightbox(i, e)}
                                >
                                    <div style={backgroundImage} />
                                </div>
                            </div>
                        );
                    })}
                </div>
            </div>
            <Modal isOpen={this.state.isOpen} onRequestHide={this.hideModal}>
                <button
                    type="button"
                    className="images player_button_close"
                    onClick={this.hideModal}
                >
                    X
                </button>
                <ModalBody>
                    <ImageGallery
                        items={this.state.data.images}
                        startIndex={this.state.currentImage}
                        slideInterval={2000}
                        showPlayButton={false}
                        showFullscreenButton={false}
                        onImageLoad={this.handleImageLoad}
                        onSlide={this._onSlide}
                        showIndex={true}
                        renderItem={this._renderImages}
                    />
                </ModalBody>
            </Modal>
        </div>
    );
}

}

Answer 1

当我需要重新初始化当前元素时，我找到了解决方案。这对于其他开发人员可能很有用。答案是当我们创建元素列表时，“键”是一种特殊的字符串属性。

每当“密钥”行进时，更改元素就会重新显示。所以

  this.state = {
    open: false,
    showPlayButton: true,
    showGalleryPlayButton: false,
    showFullscreenButton: true,
    showGalleryFullscreenButton: false,
    currentImage: 0,
    test: 0,
    player: [],
    data: data,
    number:0
};


 openLightbox(index, event) {
  event.preventDefault();
   this.setState(
    prevState => {
        return {
            currentImage: index,
            isOpen: true,
            number:prevState.number+1
        };
    },
    () => {
        console.log("currentImage", this.state.currentImage);
        console.log("event", index);
    }
 );

在这里，我们无需添加key = {this.state.number}

           <Modal isOpen={this.state.isOpen} onRequestHide={this.hideModal}>
            <button
                type="button"
                className="images player_button_close"
                onClick={this.hideModal}
            >
                X
            </button>
            <ModalBody>
                <ImageGallery
                    key={this.state.number}
                    items={this.state.data.images}
                    startIndex={this.state.currentImage}
                    slideInterval={2000}
                    showPlayButton={false}
                    showFullscreenButton={false}
                    onImageLoad={this.handleImageLoad}
                    onSlide={this._onSlide}
                    showIndex={true}
                    renderItem={this._renderImages}
                />
            </ModalBody>
        </Modal>

在图库中反应当前图像

1 个答案: