1.父组件向子组件通信 :
父组件通过向子组件传递 props,子组件得到 props 后进行相应的处理。
Container.js
.....
import Sub from 'Sub.js';
class Container extends React.Component{
constructor(){
super();
}
render(){
return (
<Sub title="评论列表" // 通过属性传递
name={"xx"}
/>
);
}
}
Sub.js
class Sub extends React.Component{
constructor(props){
super(props);
}
render(){
return (
<div>
<p>{this.props.title}</p> // 用this.props获取父组件传入的值
<p>{this.props.name}</p>
</div>
);
}
}
exprot default Sub;
2.子组件向父组件通信 :
利用回调函数,可以实现子组件向父组件通信:
父组件将一个函数作为 props 传递给子组件,子组件调用该回调函数,便可以向父组件通信。
Container.js
.....
import Sub from 'Sub.js';
class Container extends React.Component{
constructor(){
super();
}
getChildMsg(msg){
console.log("子组件给父组件通信内容: "+msg);
}
render(){
return (
<Sub title="评论列表"
callback={this.getChildMsg.bind(this)} // 将回调函数传给子组件
/>
);
}
}
Sub.js
class Sub extends React.Component{
constructor(props){
super(props);
this.onOk=this.onOk.bind(this);
}
onOk(){
this.props.callback("sub"); // 回调函数
}
render(){
return (
<div>
<button onClick={this.onOk}></button>
</div>
);
}
}
exprot default Sub;
3.跨级组件之间的通信
所谓跨级组件通信,就是父组件向子组件的子组件通信,向更深层的子组件通信。跨级组件通信可以采用下面两种方式:
1. 使用 context 对象
父组件:
1.声明自己支持的context,并且提供context中属性的PropType.
声明:
static childContextTypes={
name: PropTypes.string, // 需要传入给子组件的参数
getData: PropTypes.func,
arr: PropTypes.array
}
2. 提供一个getChildContext函数,返回一个初始化的context对象
返回context对象:
getChildContext(){
return{
name: this.state.name,
arr : this.props.array,
getData: this.getData.bind(this)
}
}
3. 回调函数
getData(data){
console.log(data);// data 为子组件传给父组件的回调
}
子组件:
1. 声明自己需要使用的context
static contextTypes={
name: PropTypes.string,
getData: PropTypes.func
}
2. 使用context
var name = this.context.name;
var str = "把这个值传递给父级";
this.context.getData(str);
注意事项:
1. 在组件中如果有constructor,在构造函数中,应该将context传入
constructor(props, context){
super(props, context);
}
2. 改变context对象
待续。。。
3. context在无状态组件中的用法
const Sub =(props, context)=>{
var name = context.name;
context.getData("回调传参");
retrun(
<div>....</div>
);
}
Sub.contextTypes={
name: PropTypes.string,
getData: PropTypes.func
4. context 在生命周期中的用法
constructor(props, context)
componentWillReceiveProps(nextProps, nextContext)
shouldComponentUpdate(nextProps, nextState, nextContext)
componentWillUpdate(nextProps, nextState, nextContext)
componentDidUpdate(prevProps, prevState, prevContext)
5. 根据react的组件层级,一个组件可以有多个父级,可以同时声明在不通父级中要使用的context
2. 中间组件层层传递 props
App.js
render(){
return(
<Sub
name="test"
sendData={this.sendData.bind(this)}
/>
);
};
Sub.js
render(){
return(
<SubSub
name={this.props.name}
sendData={this.props.sendData}
/>
);
};
SubSub.js
....
var name = this.props.name;
this.props.sendData("App回调");
...
4.非嵌套组件间通信
非嵌套组件,就是没有任何包含关系的组件,包括兄弟组件以及不在同一个父级中的非兄弟组件。对于非嵌套组件,可以采用下面两种方式:
1.利用二者共同父组件的 context 对象进行通信
context使用方法同上
2.使用自定义事件的方式
后期继续。。。