React中父子组件通信传值

1,父组件向子组件传递

         React数据流动是单向的,父组件向子组件通信也是最常见的;父组件通过props向子组件传递需要的信息

//父组件

class Parent extends Component{

     state = { msg: 'start' };

     render() {

          return <Child parms={this.state.msg} />; //父组件引用子组件时，将state状态数据以属性的方式传递给子组件props对象的parms属性中

     }

}

//子组件 class Child extends Component{

　constructor(...args){

　　　　super(...args); //调用父类的 constructor(x, y),继承父组件的this对象，这是因为子类没有自己的this对象，而是继承父类的this对象,　//只有render时，可以不用写,在render函数以外要使用this，就得调用super()方法

　　}

  render() {
    return <p>{this.props.parms}</p> //子组件通过this.props.parms使用父组件传递过来的值

 } }

2,子组件向父组件传递

• 利用回调函数
• 利用自定义事件机制
• 子组件通过 调用父组件传递到子组件的方法  让父组件自己去修改自己的状态值。

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

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

　　　<Child name={this.state.name} parent={this} /> //将整个this传递给子组件his.props.parent.fn(666);//子组件使用props.parent的整个父组件可以任意调用父组件下的函数

子组件调用父组件函数：

          this.props.transMsg(parms);

          this.props.parent.fn(666);//子组件使用props.parent的整个父组件可以任意调用父组件下的函数

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>
  }
}