我不能在React上实现Lightbox Gallery

Question

I'm follow the steps of this dependencie: http://jossmac.github.io/react-images/

And it isn't work. No picture showing and there is showing an error message:

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

Here is my code:

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;

Does anybody know how to solve it? Tahnk you

Answer 1

Consider adding all the missing handlers & state in your class:

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>
    );
  }
}