React LightBox(反应图像)：无法读取未定义的属性"状态"

Question

当我尝试运行以下代码时，我在控制台中收到错误"无法读取未定义的属性'状态'"。我相信这与this.的使用有关，但我不知道如何解决它。我在这里使用快速入门示例：https://github.com/jossmac/react-images。谁能帮忙？

 ReactDOM.render(
          <div>
           <Lightbox
            images={[{ src: 'http://example.com/img1.jpg' }, { src: 'http://example.com/img2.jpg' }]}
            isOpen={this.state.lightboxIsOpen}
            onClickPrev={this.gotoPrevious}
            onClickNext={this.gotoNext}
            onClose={this.closeLightbox}
          />

          </div>,
            document.getElementById("contents")
        )

Answer 1

您应该创建一个React Component并定义其所有属性。然后，您可以使用类似ReactDOM.render()渲染该组件

class App extends React.Component {
  constructor() {
    super();
    this.state = {
      lightboxIsOpen: true
    }
    this.gotoPrevious = this.gotoPrevious.bind(this);
    this.gotoNext = this.gotoNext.bind(this);
    this.closeLightbox = this.closeLightbox.bind(this);
  }
  gotoPrevious() {
     //....body here
  }
  gotoNext() {
    //..body here
  }
  closeLightbox() {
    //..body here
  }
  render() {
    return (
       <div>
           <Lightbox
            images={[{ src: 'http://example.com/img1.jpg' }, { src: 'http://example.com/img2.jpg' }]}
            isOpen={this.state.lightboxIsOpen}
            onClickPrev={this.gotoPrevious}
            onClickNext={this.gotoNext}
            onClose={this.closeLightbox}
          />
      </div>
    )
  }
}
ReactDOM.render(
        <App/>,document.getElementById("contents")
        )