标签:play render 属性 isp alert this opened 获取 img
React子组件和父组件通信包括以下几个方面:
我们从下面这个例子来详细了解:
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 });
对应的
标签:play render 属性 isp alert this opened 获取 img
原文地址:http://www.cnblogs.com/sunflowerGIS/p/6816239.html