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. 洛谷P2347 砝码称重 [2017年4月计划 动态规划01]

    P2347 砝码称重 题目描述 设有1g.2g.3g.5g.10g.20g的砝码各若干枚(其总重<=1000), 输入输出格式 输入格式: 输入方式:a1 a2 a3 a4 a5 a6 (表示1 ...

  2. CenOS SSH无密码登录

    系统环境:CentOS6.8 软件环境:SSH(yum -y install openssh-clients) IP   地址:192.168.0.188 用户环境:root.xiaoming  系统 ...

  3. PhpStorm中如何配置SVN,详细操作方法 - 郑加全的博客 - CSDN博客

      登录|注册       郑加全的博客       目录视图 摘要视图 订阅 CSDN日报0711——<离开校园,入职阿里,开启新的程序人生>      征文 | 你会为 AI 转型么? ...

  4. 人不能同时在两个地方做猪(Scrum Team)

    在一个神奇的国度里生活着许多动物, 其中有猪, 鸡, 和鹦鹉. 它们每天搞头脑风暴, 琢磨如何创业, 最后鹦鹉提议它们合伙开一个早餐店: 具体分工如下: 猪: 提供猪肉, 做熏猪肉 (bacon) 鸡 ...

  5. C# System.Timers.Timer中的坑,程序异常退出后timer依然运行问题

    问题背景 C#小白,由于本公司IM系统服务端(java)是本人独立开发的,加上现在所在项目需要对接IM系统,于是IM的客户端(C#实现)对接工作就交给我了.于是C#小白的我天真的以为只要调用C#端的S ...

  6. to_char 中fm

     1,有9的地方如果有数字就显示如果没有数字就不显示,有0的地方在没有数字的时候也会有0来占位 select to_char(9999.09556,'fm99999.0900'),to_char(99 ...

  7. FastAdmin 使用 phpmail 出现 spl_autoload_register 错误

    FastAdmin 使用 phpmail 出现 spl_autoload_register 错误 现象 意思是 __autoload() 已经废弃 问题来源于:https://ask.fastadmi ...

  8. JS实现AES加密并与PHP互通的方法分析

    <script type="text/javascript" src="/CryptoJS/aes.js"></script><s ...

  9. C++11中的并发

    在 C++98 的时代,C++标准并没有包含多线程的支持,人们只能直接调用操作系统提供的 SDK API 来编写多线程程序,不同的操作系统提供的 SDK API 以及线程控制能力不尽相同.到了 C++ ...

  10. nodeJs学习-11 multer中间件,解析post文件,上传文件

    const express=require('express'); const bodyParser=require('body-parser'); const multer=require('mul ...