基于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 相关文章推荐
Track Image Loading效果代码分析
Aug 13 Javascript
Javascript 自适应高度的Tab选项卡
Apr 05 Javascript
jQuery自定义事件的简单实现代码
Jan 27 Javascript
JavaScript删除数组元素的方法
Mar 20 Javascript
AngularJS学习笔记之ng-options指令
Jun 16 Javascript
Javascript实现可旋转的圆圈实例代码
Aug 04 Javascript
jQuery实现带有动画效果的回到顶部和底部代码
Nov 04 Javascript
VUE实现表单元素双向绑定(总结)
Aug 08 Javascript
详解滑动穿透(锁body)终极探索
Apr 16 Javascript
JSON是什么?有哪些优点?JSON和XML的区别?
Apr 29 Javascript
js实现带有动画的返回顶部
Aug 09 Javascript
vscode自定义vue模板的实现
Jan 27 Vue.js
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 xml实例 留言本
2009/03/20 PHP
PHP数组传递是值传递而非引用传递概念纠正
2013/01/31 PHP
Codeigniter通过SimpleXML将xml转换成对象的方法
2015/03/19 PHP
php获取从html表单传递数组的方法
2015/03/20 PHP
百度地图API使用方法详解
2015/08/25 PHP
Laravel框架基于中间件实现禁止未登录用户访问页面功能示例
2019/01/17 PHP
a标签的href和onclick 的事件的区别介绍
2013/07/26 Javascript
比较新旧两个数组值得增加和删除的JS代码
2013/10/30 Javascript
一个CSS+jQuery实现的放大缩小动画效果
2014/02/19 Javascript
基于JavaScript实现移动端点击图片查看大图点击大图隐藏
2015/11/04 Javascript
使用Object.defineProperty实现简单的js双向绑定
2016/04/15 Javascript
通过javascript进行UTF-8编码的实现方法
2016/06/27 Javascript
微信小程序 wxapp内容组件 icon详细介绍
2016/10/31 Javascript
详解NODEJS的http实现
2018/01/04 NodeJs
微信小程序中使用自定义图标(阿里icon)的方法
2018/08/20 Javascript
微信小程序商品详情页底部弹出框
2019/11/22 Javascript
python 中if else 语句的作用及示例代码
2018/03/05 Python
Python简单获取网卡名称及其IP地址的方法【基于psutil模块】
2018/05/24 Python
基于Python对数据shape的常见操作详解
2018/12/25 Python
Django中ORM外键和表的关系详解
2019/05/20 Python
Django中template for如何使用方法
2021/01/31 Python
纯HTML5+CSS3制作生日蛋糕(代码易懂)
2016/11/16 HTML / CSS
Html5原生拖拽相关事件简介以及基础实现
2020/11/19 HTML / CSS
Perfume’s Club意大利官网:欧洲美妆电商
2019/05/03 全球购物
光声世纪笔试题目
2012/08/25 面试题
Prototype如何实现页面局部定时刷新
2013/08/06 面试题
甲方资料员岗位职责
2013/12/13 职场文书
《匆匆》教学反思
2014/02/22 职场文书
蛋糕店创业计划书
2014/05/06 职场文书
授权委托书
2014/09/17 职场文书
2015年幼儿园中班开学寄语
2015/05/27 职场文书
远程教育培训心得体会
2016/01/09 职场文书
Python中threading库实现线程锁与释放锁
2021/05/17 Python
JavaScript 中for/of,for/in 的详细介绍
2021/11/17 Javascript
java协程框架quasar和kotlin中的协程对比分析
2022/02/24 Java/Android
Vue3中toRef与toRefs的区别
2022/03/24 Vue.js