跨级组件通信
所谓跨级组件通信,就是父组件向子组件的子组件通信,向更深层的子组件通信。跨级组件通信可以采用下面两种方式:
1.中间组件层层传递 props
2.使用 context 对象
使用 context 是一种可行的方式,context 相当于一个全局变量,是一个大容器,我们可以把要通信的内容放在这个容器中,这样一来,不管嵌套有多深,都可以随意取用。
使用 context 也很简单,需要满足两个条件:
1上级组件要声明自己支持 context,并提供一个函数来返回相应的 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
}