基于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 相关文章推荐
Ext对基本类型的扩展 ext,extjs,format
Dec 25 Javascript
引用外部脚本时script标签关闭的写法
Jan 20 Javascript
jQuery选择器全集详解
Nov 24 Javascript
javascript组合使用构造函数模式和原型模式实例
Jun 04 Javascript
Bootstrap的Carousel配合dropload.js实现移动端滑动切换图片
Mar 10 Javascript
Angular2实现自定义双向绑定属性
Mar 22 Javascript
大白话讲解JavaScript的Promise
Apr 06 Javascript
JavaSctit 利用FileReader和滤镜上传图片预览功能
Sep 05 Javascript
AngularJs 最新验证手机号码的实例,成功测试通过
Nov 26 Javascript
Vue.js 中的实用工具方法【推荐】
Jul 04 Javascript
微信小程序实现侧边栏分类
Oct 21 Javascript
Vue中使用JsonView来展示Json树的实例代码
Nov 16 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者的疑难问答(2)
2006/10/09 PHP
php csv操作类代码
2009/12/14 PHP
精美漂亮的php分页类代码
2013/04/02 PHP
使用php检测用户当前使用的浏览器是否为IE浏览器
2013/12/03 PHP
PHP设计模式之单例模式定义与用法分析
2019/03/26 PHP
用js实现输入提示(自动完成)的实例代码
2013/06/14 Javascript
使用js实现雪花飘落效果
2013/08/26 Javascript
纯js模拟div层弹性运动的方法
2015/07/27 Javascript
JavaScript蒙板(model)功能的简单实现代码
2016/08/04 Javascript
JS判断来路是否是百度等搜索索引进行弹窗或自动跳转的实现代码
2016/10/09 Javascript
bootstrap table配置参数例子
2017/01/05 Javascript
jQuery实现的简单拖动层示例
2017/02/22 Javascript
bootstrap fileinput组件整合Springmvc上传图片到本地磁盘
2017/05/11 Javascript
AngularJS实现进度条功能示例
2017/07/05 Javascript
使用nodeJs来安装less及编译less文件为css文件的方法
2017/11/20 NodeJs
vue+vue-router转场动画的实例代码
2018/09/01 Javascript
详解如何写出一个利于扩展的vue路由配置
2019/05/16 Javascript
jQuery内容选择器与表单选择器实例分析
2019/06/28 jQuery
JavaScript实现身份证验证代码实例
2019/08/26 Javascript
JavaScript Canvas编写炫彩的网页时钟
2019/10/16 Javascript
详解Vue的异步更新实现原理
2020/12/22 Vue.js
[01:07:11]Secret vs Newbee 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/17 DOTA
python通过pil模块获得图片exif信息的方法
2015/03/16 Python
在Python的Django框架中更新数据库数据的方法
2015/07/17 Python
Flask框架WTForm表单用法示例
2018/07/20 Python
画pytorch模型图,以及参数计算的方法
2019/08/17 Python
pygame编写音乐播放器的实现代码示例
2019/11/19 Python
Django使用Profile扩展User模块方式
2020/05/14 Python
HTML5给汉字加拼音收起展开组件的实现代码
2020/04/08 HTML / CSS
ECCO英国官网:丹麦鞋履品牌
2019/09/03 全球购物
怎样自定义一个异常类
2016/09/27 面试题
市场营销职业生涯规划书范文
2014/01/12 职场文书
社区党的群众路线教育实践活动总结材料
2014/10/31 职场文书
餐饮店长岗位职责
2015/04/14 职场文书
小马王观后感
2015/06/11 职场文书
如何通过简单的代码描述Angular父组件、子组件传值
2022/04/07 Javascript