React中父子组件间的通信问题

时间:2020-12-01 22:05:40

子组件调用父组件:

1)在父组件设置对应的属性和方法;

2)将父组件的属性,方法设置在子组件的标签属性上;

3)子组件中利用this.props来调用父组件的成员;

eg:

父:

   var p=React.cleateClass({

     getDefaultProps:function(){

       return{a:1}

     },

     render:function(){

       return <Ch a={this.props.a}></Ch>

     }

})

子:

   var Ch=React.createClass({

   render:fucntion(){

      return <div>{this.props.a}</div>

   }

})

父组件调用子组件:

1)在父组件中的子组件利用ref对子组件标注引用;

2)在父组件中利用this,refs获取子组件的引用,从而调用子组件的成员;

eg:

父:

   var p=React.cleateClass({

     hand:function(){

       this.refs.one.hands();

     },

     render:function(){

       return <Ch ref="one"></Ch>

     }

})

子:

   var Ch=React.createClass({

  hands:function(){}

   render:fucntion(){

      return <div></div>

   }

})