javascript - 我无法在 React 上实现 Lightbox Gallery

Question

我遵循这个依赖的步骤: http://jossmac.github.io/react-images/

这是行不通的。没有显示图片，显示错误信息:

index.js:2178 Warning: Failed prop type: The prop onClose is marked as required in Lightbox, but its value is undefined

这是我的代码:

import React, { Component } from "react";
import Lightbox from "react-images";

const URL_INTERIORES = "http://localhost:3001/interiores";

const LIGHTBOX_IMAGE_SET = [
  {
    src: "/images/int_02.jpg",
    caption: "A forest",
    // As an array
    srcSet: ["/images/int_02.jpg", "/images/int_02.jpg"]
  },
  {
    src: "/images/int_02.jpg",
    // As a string
    srcSet: "/images/int_02.jpg 1024w, /images/int_02.jpg 800w, /images/int_02.jpg 500w, /images/int_02.jpg 320w"
  }
];

class Interiores extends Component {
  render() {
    const { open } = this.state;
    return (
      <div>
        <div>
          <Lightbox
            images={LIGHTBOX_IMAGE_SET}
            isOpen={this.state.lightboxIsOpen}
            onClickPrev={this.gotoPrevLightboxImage}
            onClickNext={this.gotoNextLightboxImage}
            onClose={this.closeLightbox}
          />
        </div>
      </div>
    );
  }
}

export default Interiores;

有人知道怎么解决吗？谢谢你

Answer 1

考虑在您的类中添加所有缺少的处理程序和状态:

class Interiores extends Component {
  state = {
     lightboxIsOpen: false
  }
  gotoPrevLightboxImage() {
     // Add the logic here
  }
  gotoNextLightboxImage() {
     // Add the logic here
  }
  closeLightbox(e) {
     // Add the logic here
  }
  render() {
    const { lightboxIsOpen } = this.state;
    return (
        <div>
          <Lightbox
            images={LIGHTBOX_IMAGE_SET}
            isOpen={lightboxIsOpen}
            onClickPrev={() => this.gotoPrevLightboxImage()}
            onClickNext={() => this.gotoNextLightboxImage()}
            onClose={e => this.closeLightbox(e)}
          />
        </div>
    );
  }
}