zoukankan      html  css  js  c++  java
  • 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方法

  • 相关阅读:
    ----Vue 单页应用的首屏优化----
    ----小程序之rich-text图片宽度自适应----
    ----vue-router 如何在新窗口打开页面----
    ----element-ui实现时间控件开始时间和结束时间关联----
    ----element-ui自定义表单验证----
    ----js中的every和some----
    「Linux学习」之挂载访问samba服务
    「Linux学习」之samba和nfs共享服务搭建
    「Linux学习」之防火墙服务设置
    「linux学习」之批量创建用户脚本
  • 原文地址:https://www.cnblogs.com/tian874540961/p/10271108.html
Copyright © 2011-2022 走看看