最常見的就是父子組件之間傳遞參數(shù)
父組件往子組件傳值，直接用this.props就可以實現(xiàn)
在父組件中揩环，給需要傳遞數(shù)據(jù)的子組件添加一個自定義屬性搔弄，在子組件中通過this.props就可以獲取到父組件傳遞過去的數(shù)據(jù)
// 父組件
render() {
return (
// 使用自定義屬性傳遞需要傳遞的方法或者參數(shù)
<ShopUi toson={this.state}></ShopUi>
)
}
//子組件
//通過this.props.toson就可以獲取到父組件傳遞過來的數(shù)據(jù)
、丰滑、如果還需要往孫組件傳遞那么在子組件通過自定義屬性繼續(xù)傳遞就行了
tograndson={this.props.toson}
顾犹、、孫組件通過this.props.tograndson獲取到數(shù)據(jù)
子組件給父組件傳值的話褒墨，需要在父組件設置接收函數(shù)和state炫刷，同時將函數(shù)名通過props傳遞給子組件
也就是給子組件傳入父組件的方法，在子組件進行調用
//孫子組件
export default class Grandson extends Component{
render(){
return (
<div style={{border: "1px solid red",margin: "10px"}}>
{this.props.name}：
<select onChange={this.props.handleSelect}>
<option value="男">男</option>
<option value="女">女</option>
</select>
</div>
)
}
};
//子組件
export default class Child extends Component{
render(){
return (
<div style={{border: "1px solid green",margin: "10px"}}>
{this.props.name}：<input onChange={this.props.handleVal}/>
<Grandson name="性別" handleSelect={this.props.handleSelect}/>
</div>
)
}
};
//父組件
export default class Parent extends Component{
constructor(props){
super(props)
this.state={
username: '',
sex: ''
}
},
handleVal(event){
this.setState({username: event.target.value});
},
handleSelect(value) {
this.setState({sex: event.target.value});
},
render(){
return (
<div style={{border: "1px solid #000",padding: "10px"}}>
<div>用戶姓名：{this.state.username}</div>
<div>用戶性別：{this.state.sex}</div>
<Child name="姓名" handleVal={this.handleVal} handleSelect={this.handleSelect}/>
</div>
)
}
}
前一段時間有人問過我這樣一個問題郁妈，constructor里面的super()是干嘛用的浑玛？
總結一下：
如果要在子類的constructor里使用this，必須調用父類constructor噩咪，否則就拿不到this
那么問題就來了顾彰，如何調用父類的constructor呢失晴？ 通過super()
如果要在constructor里使用父組件傳遞過來的參數(shù)，必須在調用父組件super時拘央，傳遞參數(shù)給父組件的constructor
如果不在constructor里面使用this涂屁，或者參數(shù)，就不需要super 灰伟； 因為React以及幫你做了this拆又，props的綁定
路由傳參
安裝 npm install react-router-dom --save-dev
定義路由(一般會放在外面)
<HashRouter>
<Switch>
<Route exact path="/" component={Home}/>
<Route exact path="/detail" component={Detail}/>
</Switch>
</HashRouter>
當頁面跳轉時
<li onClick={el => this.props.history.push({
pathname:'/detail',
state:{id:3}
})}
>
</li>
接收 通過this.props.history.location可以獲取到傳遞過來的數(shù)據(jù)
*路由傳參可能會有這個問題，就是只有在路由定義時掛載的組件中才會有props里面的location history match *
路由上掛載的那個組件一般都是Container.js栏账，一般我們會往下分出UI.js組件帖族，在這里面進行點擊跳轉，UI組件props里沒有location history match **
需要用到高階組件withRouter
狀態(tài)提升
將多個組件需要共享的狀態(tài)提升到離他們最近的那個公共父組件上挡爵，然后父組件通過props分發(fā)給子組件
context
當某個組件在自己的context中保存了某個狀態(tài)竖般，那個該組件下的所有子孫組件都可以訪問到這個狀態(tài)，不需要中間組件的傳遞茶鹃，而這個組件的父組件是沒辦法訪問的
class Index extends Component {
static childContextTypes = {
themeColor: PropTypes.string
}
constructor () {
super()
this.state = { themeColor: 'red' }
}
getChildContext () {
return { themeColor: this.state.themeColor }
}
render () {
return (
<div>
<Header />
<Main />
</div>
)
}
}
通過getChildContext()將屬性傳遞給所有的子孫組件
提供 context 的組件必須提供 childContextTypes 作為 context 的聲明和驗證涣雕。</pre>
class Title extends Component {
static contextTypes = {
themeColor: PropTypes.string
}
render () {
return (
<h1 style={{ color: this.context.themeColor }}>標題</h1>
)
}
}
子組件要獲取 context 里面的內容的話，就必須寫 contextTypes 來聲明和驗證你需要獲取的狀態(tài)的類型闭翩，它也是必寫的挣郭，如果你不寫就無法獲取 context 里面的狀態(tài)。
Title 想獲取 themeColor疗韵，它是一個字符串兑障，我們就在 contextTypes 里面進行聲明。
