基于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 相关文章推荐
fromCharCode和charCodeAt 方法
Dec 27 Javascript
js浮点数精确计算(加、减、乘、除)
Dec 26 Javascript
JavaScript仿静态分页实现方法
Aug 04 Javascript
js实现鼠标点击文本框自动选中内容的方法
Aug 20 Javascript
AngularJS自动表单验证
Feb 01 Javascript
jQuery实现checkbox列表的全选、反选功能
Nov 24 Javascript
JavaScript正则替换HTML标签功能示例
Mar 02 Javascript
Vue学习笔记进阶篇之过渡状态详解
Jul 14 Javascript
JavaScript引用类型之基本包装类型实例分析【Boolean、Number和String】
Aug 09 Javascript
vue.js实现会动的简历(包含底部导航功能,编辑功能)
Apr 08 Javascript
vuex vue简单使用知识点总结
Aug 29 Javascript
jquery实现广告上下滚动效果
Mar 04 jQuery
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中使用exec,system等函数调用系统命令的方法(不建议使用,可导致安全问题)
2012/09/07 PHP
PHP中执行cmd命令的方法
2014/10/11 PHP
PHP5.6.8连接SQL Server 2008 R2数据库常用技巧分析总结
2019/05/06 PHP
写出更好的JavaScript之undefined篇(上)
2009/11/22 Javascript
jQuery的实现原理的模拟代码 -1 核心部分
2010/08/01 Javascript
JavaScript自定义日期格式化函数详细解析
2014/01/14 Javascript
详解jquery事件delegate()的使用方法
2016/01/25 Javascript
简单实现node.js图片上传
2016/12/18 Javascript
微信小程序 实战程序简易新闻的制作
2017/01/09 Javascript
AngularJS通过ng-Img-Crop实现头像截取的示例
2017/08/17 Javascript
浅谈react前后端同构渲染
2017/09/20 Javascript
微信小程序搜索功能(附:小程序前端+PHP后端)
2019/02/28 Javascript
vue 自定义组件的写法与用法详解
2020/03/04 Javascript
[51:53]完美世界DOTA2联赛决赛日 Inki vs LBZS 第二场 11.08
2020/11/10 DOTA
使用Python的Tornado框架实现一个一对一聊天的程序
2015/04/25 Python
Python利用Nagios增加微信报警通知的功能
2016/02/18 Python
python中函数总结之装饰器闭包详解
2016/06/12 Python
Python学习入门之区块链详解
2017/07/25 Python
python自动脚本的pyautogui入门学习
2020/04/01 Python
python3用PyPDF2解析pdf文件,用正则匹配数据方式
2020/05/12 Python
Linux安装Python3如何和系统自带的Python2并存
2020/07/23 Python
从零开始的TensorFlow+VScode开发环境搭建的步骤(图文)
2020/08/31 Python
Python实现异步IO的示例
2020/11/05 Python
美国伊甸园兄弟种子公司:Eden Brothers
2018/07/01 全球购物
Geekbuying波兰:购买中国电子产品
2019/10/20 全球购物
用C#语言写出与SQLSERVER访问时的具体过程
2013/04/16 面试题
文秘人员工作职责
2014/01/31 职场文书
检举信的格式及范文
2014/04/04 职场文书
某某同志考察材料
2014/05/28 职场文书
党的群众路线教育实践活动制度建设计划方案
2014/10/31 职场文书
2014年司机工作总结
2014/11/21 职场文书
公证处委托书
2015/01/28 职场文书
2015年教师党员个人总结
2015/11/24 职场文书
八年级英语教学反思
2016/02/15 职场文书
Python中time标准库的使用教程
2022/04/13 Python
MySQL优化之慢日志查询
2022/06/10 MySQL