我不能在React上實現Lightbox Gallery

Question

我正在遵循這種依賴關系的步驟： http : //jossmac.github.io/react-images/

這是行不通的。 沒有圖片顯示，並且顯示錯誤消息：

index.js：2178警告：道具類型失敗：道具onClose在Lightbox標記為必需，但其值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>
    );
  }
}