React子组件和父组件通信

Posted tian874540961

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了React子组件和父组件通信相关的知识,希望对你有一定的参考价值。

React子组件和父组件通信

React子组件和父组件通信包括以下几个方面:

1、子组件获取父组件属性:props或者state
2、子组件调用父组件的方法
3、父组件获取子组件的属性:props或者state
4、父组件调用子组件的方法
我们从下面这个例子来详细了解:

父组件:
 1 var Father=React.createClass({
 2     getDefaultProps:function(){
 3         return {
 4             name:"父组件"
 5         }
 6     },
 7     MakeMoney:function(){ // 挣钱,供子组件调用
 8         alert("我在挣钱!");
 9     },
10     CheckStudy:function(){ // 学习,调用子组件方法
11         this.refs["child"].Study();
12     },
13     getChildName:function(){ // 调用子组件方法获取孩子名字
14         alert(this.refs["child"].getName());
15     },
16     render:function(){
17         
18         return <div>
19                     <button onClick={this.CheckStudy}>监控孩子学习</button>
20                     <button onClick={this.getChildName}>获取孩子名字</button>
21                     <br/>
22                     子组件
23                     <Child ref="child" fatherName={this.props.name} MakeMoney={this.MakeMoney}></Child>
24                 </div>;
25     }
26 });
子组件:
 1 var Child=React.createClass({
 2     getDefaultProps:function(){
 3         return {
 4             name:"子组件"
 5         }
 6     },
 7     StudyMakeMoney:function(){ // 学习挣钱,调用父组件方法
 8         this.props.MakeMoney();
 9     },
10     Study:function(){ // 学习,调用子组件方法
11         alert("我在学习!");
12     },
13     getName:function(){// 供父组件调用,返回名字
14         return this.props.name;
15     },
16     render:function(){
17         
18         return <div>父组件名字:{this.props.fatherName}<button onClick={this.StudyMakeMoney}>孩子学习挣钱</button></div>;
19     }
20 });

对应的

1、子组件Child通过父组件传入的name,获取父组件的props
2、子组件Child通过父组件传入的MakeMoney方法调用父组件方法
3、父组件Father,通过ref调用子组件的getName方法,获取props
4、父组件Father,通过ref调用子组件的Study方法








以上是关于React子组件和父组件通信的主要内容,如果未能解决你的问题,请参考以下文章

react native 之子组件和父组件之间的通信

React教程:父子组件传值(组件通信)

使用 v-model 实现 双向绑定.(子组件和父组件.)

React 中组件间通信的几种方式

React中父子组件通信

React 父子组件通信