基于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语句中的CDATA标签的意义
May 09 Javascript
基于jQuery的360图片展示实现代码
Jun 14 Javascript
同域jQuery(跨)iframe操作DOM(实例讲解)
Dec 19 Javascript
JS Replace 全部替换字符的用法小结
Dec 24 Javascript
获取鼠标在div中的相对位置的实现代码
Dec 30 Javascript
JavaScript对象的property属性详解
Apr 01 Javascript
Javascript 高阶函数使用介绍
Jun 15 Javascript
深入探秘jquery瀑布流的实现
Jan 30 Javascript
WEB 前端开发中防治重复提交的实现方法
Oct 26 Javascript
jQuery中的siblings()是什么意思(推荐)
Dec 29 Javascript
ionic 3.0+ 项目搭建运行环境的教程
Aug 09 Javascript
JS实现单张或多张图片持续无缝滚动的示例代码
May 10 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
thinkPHP批量删除的实现方法分析
2016/11/09 PHP
浅谈PHP表单提交(POST&amp;GET&amp;URL编/解码)
2017/04/03 PHP
php5对象复制、clone、浅复制与深复制实例详解
2019/08/14 PHP
thinkphp框架类库扩展操作示例
2019/11/26 PHP
PHP 判断字符串是中文还是英文, 或者是中英混合
2021/03/09 PHP
javascript Object与Function使用
2010/01/11 Javascript
各浏览器对click方法的支持差异小结
2011/07/31 Javascript
js 固定悬浮效果实现思路代码
2013/08/02 Javascript
在javascript中执行任意html代码的方法示例解读
2013/12/25 Javascript
javascript实现数独解法
2015/03/14 Javascript
Nginx上传文件全部缓存解决方案
2015/08/17 Javascript
基于jquery实现瀑布流布局
2020/06/28 Javascript
一个用jquery写的判断div滚动条到底部的方法【推荐】
2016/04/29 Javascript
Vue2.0实现调用摄像头进行拍照功能 exif.js实现图片上传功能
2018/04/28 Javascript
JavaScript事件冒泡与事件捕获实例分析
2018/08/01 Javascript
Vue项目自动转换 px 为 rem的实现方法
2018/10/29 Javascript
通过JQuery,JQueryUI和Jsplumb实现拖拽模块
2019/06/18 jQuery
Python的Django框架中settings文件的部署建议
2015/05/30 Python
pandas 如何分割字符的实现方法
2019/07/29 Python
解决django model修改添加字段报错的问题
2019/11/18 Python
jupyter修改文件名方式(TensorFlow)
2020/04/21 Python
Python离线安装各种库及pip的方法
2020/11/28 Python
Sixt美国租车:高端豪华车型自驾体验
2017/09/02 全球购物
美国女孩洋娃娃店:American Girl
2017/10/24 全球购物
凯普林包包西班牙官网:Kipling西班牙
2019/04/12 全球购物
JDO的含义
2012/11/17 面试题
建筑专业毕业生推荐信
2013/11/21 职场文书
采购员的工作职责
2013/12/26 职场文书
护理工作感言
2014/01/16 职场文书
十佳青年个人事迹材料
2014/01/28 职场文书
学校后勤岗位职责
2014/02/19 职场文书
我的求职择业计划书
2014/04/04 职场文书
教师专业自荐信
2014/05/31 职场文书
2014年小学生教师节演讲稿范文
2014/09/10 职场文书
交通事故协议书范文
2014/10/23 职场文书
考试没考好检讨书(精选篇)
2014/11/16 职场文书