码迷,mamicode.com
首页 > 其他好文 > 详细

react 父子组件互相通信

时间:2018-03-06 15:10:41      阅读:108      评论:0      收藏:0      [点我收藏+]

标签:var   return   for   word   函数   ret   order   javascrip   tor   

1,父组件向子组件传递

在引用子组件的时候传递,相当于一个属性,例如:

class Parent extends Component{
  state = {
    msg: ‘start‘
  };

  render() {
    return <Child parms={this.state.msg} />;
  }
}

class Child extends Component{
  render() {
    return <p>{this.props.parms}</p>
  }
}

2,子组件向父组件传递

子组件通过 调用父组件传递到子组件的方法 向父组件传递消息的。

父组件向子组件传递函数:

     <Child parm={this.state.msg} transMsg={msg=>this.transMsg(msg)}/>

子组件调用父组件函数:
this.props.transMsg(parms);

完整代码:

    
 class Parent extends Component{
 
    constructor(props) {
        super(props);
        state = {
            msg: ‘start‘
        };
    }
    transMsg(types){
        var newOrders = [];
        for(let type of types){
            if(type)
            alert(type);
        }
        
      }
  render() {
    return <Child parms={this.state.msg} />;
  }
}
class Child extends Component{
    
     constructor(props) {
        super(props);
        // call parent component
        console.log("parms :",this.props.parms);
       this.props.transMsg("hi ~~");
    }
  render() {
    return <p>{this.props.parms}</p>
  }
}

react 父子组件互相通信

标签:var   return   for   word   函数   ret   order   javascrip   tor   

原文地址:https://www.cnblogs.com/mingbai/p/componentTransMsg.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!