子传父

1.首先父组件设定一个自定义函数

getChildDatas = (values) => {
//...业务代码
}

2.将该函数暴露在子组件的引用上

<Child
getChildDatas = {this.getChildDatas }
/>

3.在子组件内使用

this.props.getChildDatas (values);

父传子

1.直接将要传递的数据暴露在子组件的引用上

state = {
visible: false,
}
<Child
getChildDatas = {this.getChildDatas }
visible={this.state.visible}
/>

2.在子组件内使用

render() {
const { visible } = this.props; //this.props 就是从父组件传递过来的数据,在此将其解构取出visible 这个要用的属性
return (
<Modal
visible={visible}
/>
);
}

react父子组件数据传递的更多相关文章

  1. React中父子组件数据传递

    Vue.js中父子组件数据传递:Props Down ,  Events Up Angular中父子组件数据传递:Props Down,  Events  Up React中父子组件数据传递:Prop ...

  2. vue2.0 父子组件数据传递prop

    vue的一个核心概念就是组件,而组件实例的作用域是孤立的,所以组件之间是不能直接引用其他组件的数据的.极端点举例来说,就是可以在同一个项目中,每一个组件内都可以定义相同名称的数据. data () { ...

  3. 关于vue.js父子组件数据传递

    vue.js中使用props down,events up的原则进行父子组件间的通信,先来记录下props down,看个例子: <div id="app2"> < ...

  4. Vue2.x之父子组件数据传递

    父传子,并且通过fatherEvent接收子组件传过来的值 <template> <div class='father'> <Son :fatherData=" ...

  5. Vue.js 父子组件相互传递数据

    父传子 : 子组件接收变量名=父组件传递的数据 如::f-cmsg="fmsg"  注意驼峰问题 子传父:@子组件关联的方法名 = 父组件接受的方法名 如:@func=" ...

  6. vue教程3-05 vue组件数据传递、父子组件数据获取,slot,router路由

    vue教程3-05 vue组件数据传递 一.vue默认情况下,子组件也没法访问父组件数据 <!DOCTYPE html> <html lang="en"> ...

  7. 【Vue】Vue中的父子组件通讯以及使用sync同步父子组件数据

    前言: 之前写过一篇文章<在不同场景下Vue组件间的数据交流>,但现在来看,其中关于“父子组件通信”的介绍仍有诸多缺漏或者不当之处, 正好这几天学习了关于用sync修饰符做父子组件数据双向 ...

  8. vue 父子组件属性传递

    父子组件属性传递 注意:0.谁被引用,谁就算子组件  1.属性命名最好完全小写,否则需要如下格式转换:myAttr == my-attr 2.引入的vue组件后必须通过 components 注册才能 ...

  9. Vue父子组件数据双向绑定,子组件可修改props

    第一种,子组件通过监听父组件数据,子组件改变数据之后通知给父组件 原文链接:https://blog.csdn.net/m0_37728716/article/details/81776929 父组件 ...

随机推荐

  1. CSS锚伪类顺序需注意的几点

    CSS锚伪类有以下几种: a:link{color:pink} /*未访问的链接*/ a:visited{color:red} /*已访问的链接*/ a:hover{color:blue} /*鼠标移 ...

  2. 形参前的&&啥意思?

    C++2011标准的 右值引用 语法 去搜索“c++11右值引用” 右值引用,当传入临时对象时可以避免一次拷贝. 右值引用.举个例子 C/C++ code   ? 1 2 3 4 5 6 7 8 // ...

  3. 数据库-mysql管理

    MySQL 管理 启动及关闭 MySQL 服务器 首先,我们需要通过以下命令来检查MySQL服务器是否启动: ps -ef | grep mysqld 如果MySql已经启动,以上命令将输出mysql ...

  4. centos7 安装java和tomcat9

    centos7 安装java 下载好java安装包后,首先是解压,然后配置环境变量. 在usr下新建Java文件夹,把java解压到Java文件夹中 新建文件夹 # mkdir /usr/Java 键 ...

  5. MySQL基础 - 权限配置

    为数据库创建特定的用户和密码 mysql>grant all privileges on <database>.* to '<username>'@'localhost' ...

  6. MySQL学习笔记:floor、round —— 取整

    在MySQL中做数值处理,需要取整或者四舍五入. floor:函数只返回整数部分,小数部分舍弃: round:函数四舍五入: END 2018-05-29 11:31:22

  7. MIT6.006Lec01:Python实现

    MIT6.006是Algo Intro这门课,据说语言使用python Lec01是讲peak finding,也就是峰值点 具体为: 一维情况下一个数组中a[i]>a[i-1]且a[i]> ...

  8. Spark(九)Spark之Shuffle调优

    一.概述 大多数Spark作业的性能主要就是消耗在了shuffle环节,因为该环节包含了大量的磁盘IO.序列化.网络数据传输等操作.因此,如果要让作业的性能更上一层楼,就有必要对shuffle过程进行 ...

  9. Python类和人类

    Python中的类 俗话说,物以类聚,人以群分,类是什么,类就是一组相同属性的集合.下面来结合人,探讨Python中类和人类的关系. 首先,我们定义一个人的类,如下: class People(obj ...

  10. CIDR的IP地址的表示与划分方法

    早期的ip地址划分: 最初设计互联网络时,为了便于寻址以及层次化构造网络,每个IP地址包括两个标识码(ID),即网络ID和主机ID.同一个物理网络上的所有主机都使用同一个网络ID,网络上的一个主机(包 ...