基于react组件之间的参数传递(详解)


Posted in Javascript onSeptember 05, 2017

1、父组件向子组件传递参数

class Child extends Component {
  componentDidMount(){

  
let name = this.props.default;


  console,log(name);

  }

  render(){


  const { default} = this.props;

  
return (




<Input />



)
   }
}
import React, { Component } from 'react';
import Child from './Child';

class Parent extends Component {
  state = {
    name: 'Bob'
  }
  render() {
    return (
      <div>
        <Child default={this.state.name} />
      </div>
    )
  }
}

2、子组件向父组件传递参数

class Child extends Component {
  state={



name:'Bob'

  }

  componentDidMount(){



this.props.toParent(this.state.name);

  }

  render(){

  
return (




<Input />



)
   }
}
import React, { Component } from 'react';
import Child from './Child';

class Parent extends Component {
 state = {


name:''
  }
  getChildInfo = (name)=>{

 
this.setState({name:name});

 }
  render() {
    return (
      <div>
        <Child toParent={this.getChildInfo.bind(this)} />
      </div>
    )
  }
}

以上这篇基于react组件之间的参数传递(详解)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
很酷的javascript loading效果代码
Jun 18 Javascript
关于js拖拽上传 [一个拖拽上传修改头像的流程]
Jul 13 Javascript
鼠标滚轴控制文本框值的JS代码
Nov 19 Javascript
js图片闪动特效可以控制间隔时间如几分钟闪动一下
Aug 12 Javascript
checkbox 选中一个另一个checkbox也会选中的实现代码
Jul 09 Javascript
用jQuery向div中添加Html文本内容的简单实现
Jul 13 Javascript
微信小程序入门教程
Nov 18 Javascript
jQuery UI插件实现百度提词器效果
Nov 21 Javascript
JavaScript递归算法生成树形菜单
Aug 15 Javascript
Vue开发之watch监听数组、对象、变量操作分析
Apr 25 Javascript
JavaScript获取当前url路径过程解析
Dec 27 Javascript
Vue+Element自定义纵向表格表头教程
Oct 26 Javascript
zTree获取当前节点的下一级子节点数实例
Sep 05 #Javascript
JavaScript基础进阶之数组方法总结(推荐)
Sep 04 #Javascript
JS沙箱模式实例分析
Sep 04 #Javascript
详解基于 axios 的 Vue 项目 http 请求优化
Sep 04 #Javascript
JS实现颜色的10进制转化成rgba格式的方法
Sep 04 #Javascript
利用yarn代替npm管理前端项目模块依赖的方法详解
Sep 04 #Javascript
JS实现匀加速与匀减速运动的方法示例
Sep 04 #Javascript
You might like
PHP 定界符 使用技巧
2009/06/14 PHP
PHP教程 基本语法
2009/10/23 PHP
destoon设置自定义搜索的方法
2014/06/21 PHP
php5.3以后的版本连接sqlserver2000的方法
2014/07/28 PHP
javascript 有趣而诡异的数组
2009/04/06 Javascript
Confirmer JQuery确认对话框组件
2010/06/09 Javascript
js 幻灯片的实现
2011/12/06 Javascript
远离JS灾难css灾难之 js私有函数和css选择器作为容器
2011/12/11 Javascript
jquery获取焦点和失去焦点事件代码
2013/04/21 Javascript
JQuery调webservice实现邮箱验证(检测是否可用)
2013/05/21 Javascript
jquery合并表格中相同文本的相邻单元格
2015/07/17 Javascript
jQuery实现的网页左侧在线客服效果代码
2015/10/23 Javascript
nodejs进阶(6)—连接MySQL数据库示例
2017/01/07 NodeJs
js实现水平滚动菜单导航
2017/07/21 Javascript
js实现Tab选项卡切换效果
2020/07/17 Javascript
node.js实现微信开发之获取用户授权
2019/03/18 Javascript
jQuery 判断元素是否存在然后按需加载内容的实现代码
2020/01/16 jQuery
Vue组件通信$attrs、$listeners实现原理解析
2020/09/03 Javascript
安装dbus-python的简要教程
2015/05/05 Python
Python函数式编程指南(一):函数式编程概述
2015/06/24 Python
Python循环语句之break与continue的用法
2015/10/14 Python
python单例模式获取IP代理的方法详解
2018/09/13 Python
Pandas分组与排序的实现
2019/07/23 Python
Python enumerate内置库用法解析
2020/02/24 Python
Jupyter Notebook的连接密码 token查询方式
2020/04/21 Python
详解canvas在圆弧周围绘制文本的两种写法
2018/05/22 HTML / CSS
美国鞋类购物网站:Shiekh Shoes
2016/08/21 全球购物
入党自我评价范文
2014/02/02 职场文书
11月升旗仪式讲话稿
2014/02/15 职场文书
《三峡》教学反思
2014/03/01 职场文书
材料会计岗位职责
2014/03/06 职场文书
师德师风整改措施
2014/10/24 职场文书
家长反馈意见及建议
2015/06/03 职场文书
装修公司管理制度
2015/08/05 职场文书
python3 实现mysql数据库连接池的示例代码
2021/04/17 Python
Javascript 解构赋值详情
2021/11/17 Javascript