问题一:Cannot read property ‘setState’ of undefined
在ES6的class中React是不会自动绑定this的,所以需要自己绑定:
将onClick={this.props.onBtnClick}
改成onClick={this.props.onBtnClose.bind(this)}
或者在class的构造函数中绑定this:this.handleClose = this.handleClose.bind(this)
;
或者直接使用箭头函数()=>
当然,用creatClass这种写法,就不会有这个问题了。
详见:https://facebook.github.io/react/docs/reusable-components.html#es6-classes
问题二:Uncaught TypeError: Cannot read property ‘xxx’ of undefined
如果你调用不了某个prop,请检查是否在constructor里声明,例如这样子:
class MyComponent extends React.Component { |
因为你没有在构造函数里传入,深入当然找不到咯。另外不要忘记调用super,因为es6中规定子类构造函数必须调用父类构造函数。
问题三:Adjacent JSX elements must be wrapped in an enclosing tag
遇到这个问题,你可能会去不停的招,我哪个标签没有闭合?明明全都闭合了呀!!
你可以看看你的代码是不是这个样子的:
class MyComponent extends React.Component { |
是的,这里的每一个标签都闭合,可它还是会报错。因为上面的代码,按照JSX编译器的规则,会被翻译成以下内容:(实际上并不能编译,会报错的)
class MyComponent extends React.Component { |
发现问题了吧,一个函数不能同时返回两个值,所以render中只能返回一个DOM结点,这里你可以用div把内容包围起来,当然你要注意一下包围了以后会不会影响到css。
本文发表于www.imyzf.com,采用知识共享署名-相同方式共享 4.0 国际许可协议进行许可。