0

我正在使用"react-image-lightbox"制作画廊。首先，我使用 Material-Ui 中的 Grid 显示图像，然后按照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>
    );
  }
}
4

1 回答 1

0

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

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

{isOpen && (
  <Lightbox
    imageCaption={captions[photoIndex]}
  />
)}
于 2019-12-31T19:00:10.993 回答