跨級組件通信
所謂跨級組件通信,就是父組件向子組件的子組件通信,向更深層的子組件通信割捅≤罱跨級組件通信可以采用下面兩種方式:
1.中間組件層層傳遞 props
2.使用 context 對象
使用 context 是一種可行的方式,context 相當于一個全局變量蝴蜓,是一個大容器,我們可以把要通信的內(nèi)容放在這個容器中,這樣一來咏尝,不管嵌套有多深,都可以隨意取用啸罢。
使用 context 也很簡單编检,需要滿足兩個條件:
1上級組件要聲明自己支持 context,并提供一個函數(shù)來返回相應的 context 對象
2.子組件要聲明自己需要使用 context
例如:
import React from 'react';
import Proptype from 'prop-types';
export default class Attented extends React.Component{
constructor(props,context){
super(props,context)
let data=context.router.route.location.data;
if(data&&Object.keys(data).length){
window.localStorage.setItem('detali',JSON.stringify(data));
}else{
data:{}
}
this.state={
data
}
}
componentDidMount(){
if(!Object.keys(this.state.data).length){
this.setState({
data:JSON.parse(window.localStorage.getItem('detali'))
})
}
}
render(){
if(!Object.keys(this.state.data).length){
return null
}
return <div>
<p>{this.state.data.target.question.title}</p>
<p>{this.state.data.target.question.excerpt}</p>
</div>
}
}
Attented.contextTypes={
router:Proptype.object.isRequired
}