Warning: React.createElement: type should not be null, undefined, boolean, or number.
解决:https://codereviewvideos.com/blog/warning-react-createelement/
最基础的语法问题:他们之间的区别{}
import { Posts } from '../components/Posts';
import Posts from '../components/Posts';
2.页面跳转
import { browserHistory } from 'react-router'
browserHistory.push('/some/path')
3.不带参数和带参数的方法
constructor{
super(props)
this.noparams1 = this.noparams1.bind(this)
this.noparams2 = this.noparams2.bind(this)
}
noparams1(){
...
}
noparams2(e){
...
}
params(a1){
...a1...
}
render:function(){
return(
<div>
<p onClick={this.noparams1}>noparams1</p>
<p onClick={this.noparams2}>noparams2</p>
<p onClick={this.noparams1.bind(this,a1)}>params</p>
</div>
);
}
4.componentWillReceiveProps
>this.setState 可以写在这里面
[官方说明参考](https://facebook.github.io/react/docs/react-component.html#shouldcomponentupdate)
此方法要注意 在里面写多个action有可能会死循环,因此要做很多判断
5.Webpack打包ES6以及ES7和CommonJs混合React
>[Webpack打包](http://www.onmpw.com/tm/xwzj/web_157.html)
ES7的特性 需要
install babel-preset-stage-0 --save-dev
然后在webpack.config.js加上 stage-0:
query:{
presets:['es2015','react','stage-0']
}
6.fetch send cookie
>默认情况下fetch不支持发送cookies 因此 后台可能读不到session 因此需要加上credentials: 'same-origin'
fetch('/users', { credentials: 'same-origin'})
https://github.com/github/fetch/blob/c23c3f9b3aa3e2bcc8853cc0b1b08830068e6163/README.md#sending-cookies
>>Sending cookies
To automatically send cookies for the current domain, the credentials
option must be provided:
>>This option makes fetch
behave similar to XMLHttpRequest with regards to cookies. Otherwise, cookies won't get sent, resulting in these requests not preserving the authentication session.
Use the include
value to send cookies in a [cross-origin resource sharing](https://en.wikipedia.org/wiki/Cross-origin_resource_sharing) (CORS) request.
fetch('https://example.com:1234/users', { credentials: 'include'})
7.dispatch not found
>如果使用mapdispatchtoprops需要加上dispatch
var mapDispatchToProps = function(dispatch){
return {
addCompany: function(company){ dispatch(addCompany(company)); },
dispatch //其他地方才可以使用dispatch
}
};
8.ref 使用
checkbox
handleChange(e, key){
console.log(key)
console.log(this.refs.inputcheckbox.checked)
}
render() {
return (
<div className="PurCartdiv">
<input type="checkbox" ref="inputcheckbox" onChange={this.handleChange.bind(this, key)}/>
</div>
)
}