子传父

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. 学习记录:mongodb里插入整型值

    =============================================== 2018/1/24_第1次修改                       ccb_warlock == ...

  2. VBA笔记-参考教程

    参考教程1: http://www.cnblogs.com/wuzhiblog/tag/VBA/ 1. VBA中字符换行 VBA中字符换行显示需要使用换行符来完成.下面是常用的换行符          ...

  3. Ansible playbook基础组件介绍

    本节内容: ansible playbook介绍 ansible playbook基础组件 playbook中使用变量 一.ansible playbook介绍 playbook是由一个或多个“pla ...

  4. Ubuntu下编译安装OpenCV 2.4.7并读取摄像头

    主要参考: 1.http://www.ozbotz.org/opencv-installation/ 2.http://www.ozbotz.org/opencv-install-troublesho ...

  5. bash101总结

    看了 bash101 ,做的一些总结吧,都是些常见用法,易错 1. 有空格会显示多行 2.contine 书里太细了,有空补起来

  6. python 判断字符编码

    一般情况下,需要加这个: import sys reload(sys) sys.setdefaultencoding('utf-8') 打开其他文件编码用codecs.open 读 下面的代码读取了文 ...

  7. 【LOJ】#2031. 「SDOI2016」数字配对

    题解 这个图是个二分图,因为如果有一个奇环的话,我们会发现一个数变成另一个数要乘上个数不同的质数,显然不可能 然后我们发现这个不是求最大流,而是问一定价值的情况下最大流是多少,二分一个流量,加上一条边 ...

  8. Java 中常见数据类型的相互转换

    1.将String 转化成 long , 转化成 double String 转化成 long : long i = Long.parseLong(String s);    或 long i = L ...

  9. Codeforces Round #207 (Div. 1) D - Bags and Coins 构造 + bitset优化dp + 分段查找优化空间

    D - Bags and Coins 思路:我们可以这样构造,最大的那个肯定是作为以一个树根,所以我们只要找到一个序列a1 + a2 + a3 .... + ak 并且ak为 所有点中最大的那个,那么 ...

  10. 8-8 Ddfense Line uva1471 优先级队列

    题意:给你一串长度为n的序列   你的任务是删除一个连续的子序列  使得剩下的序列中有一个长度最大的连续递增子序列  例如  将 5 3 4 9 2 8 6 7 1 中的9 2 8 删除  得到5 3 ...