Reactjs React LightBox（React图像）：无法读取属性'；州'；未定义的

当我尝试运行下面的代码时，控制台中出现错误“无法读取未定义的属性‘state’”。我相信这与

的使用有关。

但我不知道如何修复它。我在这里使用快速入门示例：。有人能帮忙吗

 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")
        )

ReactDOM.render(
,
document.getElementById（“目录”）
)

您应该创建一个

React组件

，并定义其所有属性。然后可以使用

ReactDOM.render（）

like来渲染该组件

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")
        )

类应用程序扩展了React.Component{
构造函数（）{
超级（）；
此.state={
lightboxIsOpen：对
}
this.gotoPrevious=this.gotoPrevious.bind（this）；
this.gotoNext=this.gotoNext.bind（this）；
this.closeLightbox=this.closeLightbox.bind（this）；
}
gotoPrevious（）{
//……尸体在这里
}
gotoNext（）{
//…这里的尸体
}
closeLightbox（）{
//…这里的尸体
}
render（）{
返回(
)
}
}
ReactDOM.render(
，document.getElementById（“目录”）
)

这个错误是不言自明的。您是否尝试将此jsx代码放入react组件中，并使用ReactDOM对其进行渲染？将

this.state.lightboxIsOpen

更改为

true

，并删除

onClickPrev

、

onClickNext

和

onClose

。您没有使用这些，所以不要从示例中复制它们。@Aaron啊，我明白了。另一个问题，如果我要定义lightboxIsOpen、gotoPrevious、gotoNext、closeLightbox，我应该在哪里定义它？@组件中的无形资产，就像他们的示例一样，尽管在他们的示例中他们没有显示该部分，但他们确实使用了组件。您使用的是

ReadDOM.render（）

，因此您实际上没有任何地方可以放置它，至少在React组件树中是这样。你可以把它放在任何地方。感谢这一点，我能够理解我应该把构造函数放在哪里并定义函数。如何从Lightbox内部将图像渲染为缩略图？我在div中调用了这个.renderGallery（），但我不知道如何定义函数来将图像从Lightbox中拉出来显示为缩略图。