Warning: React.createElement: type should not be null, undefined, boolean, or number.
解決:https://codereviewvideos.com/blog/warning-react-createelement/
最基礎(chǔ)的語法問題:他們之間的區(qū)別{}
import { Posts } from '../components/Posts';
import Posts from '../components/Posts';
2.頁面跳轉(zhuǎn)
import { browserHistory } from 'react-router'
browserHistory.push('/some/path')
3.不帶參數(shù)和帶參數(shù)的方法
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有可能會死循環(huán),因此要做很多判斷
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
>默認(rèn)情況下fetch不支持發(fā)送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>
)
}