将imageCaption按钮更改为next -

Question

我正在用"react-image-lightbox".做一个画廊首先，我使用Grid显示来自Material Ui的图像，然后跟踪https://www.npmjs.com/package/react-image-lightbox的文档，但是，我不能相应地更改图像，单击下一个或前一个。我有什么线索能解决这个问题吗？

import img1 from "../../Image/Process/image1.jpg";
import img2 from "../../Image/Process/image2.jpg";
import img3 from "../../Image/Process/image3.jpg";

const images = [img1, img2, img3];

class GalleryPage extends React.Component {
  constructor(props) {
    super(props);

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

  render() {
    const { photoIndex, isOpen, caption } = this.state;
    return (
      <div className="gallery-section" id="gallery">
        <div className="mdb-lightbox">
          <Grid container direction="row" justify="center" alignItems="center">
            <Grid container item xs={3} spacing={1}>
              <figure className="frame">
                <img
                  src={img1}
                  alt="Working day"
                  className="img-fluid"
                  onClick={() =>
                    this.setState({
                      photoIndex: 0,
                      isOpen: true,
                      caption:
                        "A regular work day, Photo: Nahida Islam, license: CC0"
                    })
                  }
                />
              </figure>
            </Grid>
            <Grid container item xs={3} spacing={1}>
              <figure className="frame">
                <img
                  src={img2}
                  alt="Pizza break"
                  className="img-fluid"
                  onClick={() =>
                    this.setState({
                      photoIndex: 1,
                      isOpen: true,
                      caption:
                        "A pizza break was needed, Photo: Nahida Islam, license: CC0"
                    })
                  }
                />
              </figure>
            </Grid>
            <Grid container item xs={3} spacing={1}>
              <figure className="frame">
                <img
                  src={img3}
                  alt="The satellite"
                  className="img-fluid"
                  onClick={() =>
                    this.setState({
                      photoIndex: 2,
                      isOpen: true,
                      caption:
                        "The special weapon: Satellite, Photo: Nahida Islam, license: CC0"
                    })
                  }
                />
              </figure>
            </Grid>
          </Grid>
        </div>
        {isOpen && (
          <Lightbox
            enableZoom={false}
            mainSrc={images[photoIndex]}
            nextSrc={images[(photoIndex + 1) % images.length]}
            prevSrc={images[(photoIndex + images.length - 1) % images.length]}
            imageTitle={photoIndex + 1 + "/" + images.length}
            imageCaption={caption}
            onCloseRequest={() => this.setState({ isOpen: false })}
            onMovePrevRequest={() =>
              this.setState({
                photoIndex: (photoIndex + images.length - 1) % images.length
              })
            }
            onMoveNextRequest={() =>
              this.setState({
                photoIndex: (photoIndex + 1) % images.length
              })
            }
          />
        )}
      </div>
    );
  }
}

Answer 1

看看react上的示例代码-image Github。您只需要另一个数组的标题，类似于您的图像数组。然后使用您的photoIndex值获得正确的标题。像这样的东西-我只改变了imageCaption道具，所以我只是删除了其他的说明：

const captions = [
    "caption one", "caption two", "last caption"
]

{isOpen && (
  <Lightbox
    imageCaption={captions[photoIndex]}
  />
)}