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组件之间的参数传递的更多相关文章

  1. React 组件之间通信 All in One

    React 组件之间通信 All in One 组件间通信 1. 父子组件之间通信 props 2. 兄弟组件之间通信 3. 跨多层级的组件之间通信 Context API https://react ...

  2. react 组件之间的通信

    react推崇的是单向数据流,自上而下进行数据的传递,但是由下而上或者不在一条数据流上的组件之间的通信就会变的复杂.解决通信问题的方法很多,如果只是父子级关系,父级可以将一个回调函数当作属性传递给子级 ...

  3. 使用reflux进行react组件之间的通信

    前言 组件之间为什么要通信?因为有依赖. 那么,作为React组件,怎么通信? React官网说, 进行 父-子 通信,可以直接pass props. 进行 子-父 通信,往父组件传给子组件的函数注入 ...

  4. react组件之间的几种通信情况

    组件之间的几种通信情况 父组件向子组件通信 子组件向父组件通信 跨级组件通信 没有嵌套关系组件之间的通信 1,父组件向子组件传递 React数据流动是单向的,父组件向子组件通信也是最常见的;父组件通过 ...

  5. react 组件之间传值

    谈及React时,就会想到一个很重要的思想,就是组件化思想.它将可以重用的部分进行组件化开发,形成一个个相对独立的组件,那么组件化后,你也会提出些疑问,组件与组件之间,将怎样进行信息的传递呢?下面来介 ...

  6. React组件之间通过Props传值的技巧(小案例,帮助体会理解props、state、受控组件和非受控组件等)

    本文重要是根据react小书上的一个很简单的例子改编的,加上自己的学习理解,希望可以通过实际案例让大家对概念有更清晰的理解,当然也希望能一块学习. import React,{Component} f ...

  7. Vue中组件化编码使用、实现组件之间的参数传递(实战练习二)

    上一章节实现的是静态页面的设计.这一章节实现将数据抽取出来.通过组件间参数的传递来实现 上一章节链接地址:https://blog.csdn.net/weixin_43304253/article/d ...

  8. 微信小程序 发现之旅(三)—— 组件之间的参数传递

    一.URL 传参 当使用 navigateTo() 方法跳转页面的时候,可以在 url 后面接 query 参数 然后在 Page 页面的生命周期函数 onLoad 中可以接收到这些参数 这种方式只能 ...

  9. react组件之间传值方式

    1.父向子(通过props传值) 2.父向更深层的子(通过context传值) 3.子向父(通过回调函数传值:在父组件中创建一个函数来接收子组件传过来的参数值,通过父组件将这个函数做为子组件的属性传递 ...

随机推荐

  1. java图形验证码生成工具类及web页面校验验证码

    最近做验证码,参考网上案例,发现有不少问题,特意进行了修改和完善. 验证码生成器: import javax.imageio.ImageIO; import java.awt.*; import ja ...

  2. 集训队日常训练20180513-DIV2

    A.2176 给一个字符串s,问距离为D的字母对是否存在相同. 模拟. #include<bits/stdc++.h> using namespace std; int main() { ...

  3. 模拟20 题解(waiting)

    留坑待填 T2 #include<cstdio> #include<vector> #include<cstring> #include<iostream&g ...

  4. 转: PHP的"::"、"->"和"=>"的区别

    来自:http://blog.csdn.net/wgw335363240/article/details/20453379 1."::" 运算法 该运算符是调用一个类中的静态成员的 ...

  5. iPhone使用CoreTelephony获得SIM卡网络运营商资讯和通话资料

    注意要加头文件目录 /System/Library/Frameworks/CoreTelephony.framework/Headers 到 build 设置 Header Search Paths, ...

  6. JRE System Library、Referenced Libraries、Web App Libraries的含义

    JRE System Library.Referenced Libraries.Web App Libraries 这三个都是jar包的存放集合. JRE System Library:指Java S ...

  7. 在一个已经使用mybatis的项目里引入mybatis-plus,结果不能共存

    mybatis-plus版本号:3.0.6 问题产生原因: 原有的项目使用的是springboot+mybatis的框架,一切接口服务均没有问题.由于新的需求增加shiro权限认证,然后也在考虑用my ...

  8. Idea下面无法识别web-inf下lib目录的子目录的jar包,只能直接放lib下面才能识别?

    解决方案一: Ctrl+Alt+Shift+s打开projuect Structure-->Livraries-->➕-->java-->选择对应的lib目录即可! 解决方案二 ...

  9. ajax成功请求到后台,但是前端报404错误

    记录下今天遇见的一个问题,一个删除的ajax请求,传递一个主键到后台,后台成功接受并执行删除,但是前端报POST404错误. 查找原因是由于Controller忘记写返回状态码 @Responsebo ...

  10. Python数据分析与展示[第三周](pandas简介与数据创建)

    第三周的课程pandas 分析数据 http://pandas.pydata.org import pandas as pd 常与numpy matplotlib 一块定义 d=pd.Series(r ...