Question

我在控制台中收到错误＆＃34;无法读取属性＆＃39;状态＆＃39;未定义＆＃34;当我尝试运行以下代码时。我认为这与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")
        )

React LightBox（react-images）：无法读取属性＆＃39; state＆＃39;未定义的

1 个答案: