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. Tomcat7 Redis Session共享

    1.环境 服务器 centos7 tomcat 7 redis nginx 2.配置tomcat配置文件context.xml <Valve className="com.orange ...

  2. CentOS 7安装与配置Tomcat8

    1.下载安装包并上传服务器 2.解压 tar -zxvf apache-tomcat-8.5.16.tar.gz -C /opt/java 3.启动 cd /opt/java/apache-tomca ...

  3. 警告: deleting object of polymorphic class type which has non_virtual destructor

    如果基类里有虚函数,定义了基类指针指向派生类,就会需要定义基类虚析构,这样,基类指针析构的时候,就会先析构派生类,再析构基类. 在用基类指针指向派生类时, 在基类析构函数声明为virtual的时候,d ...

  4. IP地址与,域名,DNS服务器,端口号的联系与概念

    一,什么是IP地址? 每一个联入到Internet的计算机都需要一个世界上独一无二的IP地址,相当于人们的身份证号码! IP地址有A类,B类,C类,D类和E类之分,目前D类和E类都暂时作为保留地址! ...

  5. 对于MD5加密处理方式

    来源:http://blog.51cto.com/xqtesting/1924977 但有时候我们请求的参数可能需要加密,比如登录接口中的密码可能需要经过md5加密这时候怎么处理呢? 这种方法比较简单 ...

  6. arcgis地图窗口操作

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  7. Android原生调用mui里面的js如何实现

    遍历所有运行中的webview页面,采用自带的SDK方法进行获取所有的IWebview.MUI中自带的webview是一个IWebviewArrayList<IWebview> webli ...

  8. mac pro 1.5T内存是如何实现的

    苹果发布全新Mac Pro:28核1.5T内存 预计售价10万+ 看到这样的新闻标题是不是很震撼,甚至怀疑人生,64位机怎么就可以1.5T内存了,自己的系统盘都没那么大 而且我们知道windows下的 ...

  9. OpenCV灰度化图像

    OpenCV2版本号非常多函数发生了变化.比如二值化,其演示样例: void CmyMFC2Dlg::OnBnClickedButton1() { // TODO: Add your control ...

  10. SPSS统计分析过程包括描述性统计、均值比较、一般线性模型、相关分析、回归分析、对数线性模型、聚类分析、数据简化、生存分析、时间序列分析、多重响应等几大类

    https://www.zhihu.com/topic/19582125/top-answershttps://wenku.baidu.com/search?word=spss&ie=utf- ...