首页 > 代码库 > React子组件和父组件通信
React子组件和父组件通信
React子组件和父组件通信包括以下几个方面:
- 子组件获取父组件属性:props或者state
- 子组件调用父组件的方法
- 父组件获取子组件的属性:props或者state
- 父组件调用子组件的方法
我们从下面这个例子来详细了解:
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 });
对应的
- 子组件Child通过父组件传入的name,获取父组件的props
- 子组件Child通过父组件传入的MakeMoney方法调用父组件方法
- 父组件Father,通过ref调用子组件的getName方法,获取props
- 父组件Father,通过ref调用子组件的Study方法
React子组件和父组件通信
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。