react-redux開發(fā)筆記

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>
)
}
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容