react父子组件数据传递
子传父
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父子组件数据传递的更多相关文章
- React中父子组件数据传递
Vue.js中父子组件数据传递:Props Down , Events Up Angular中父子组件数据传递:Props Down, Events Up React中父子组件数据传递:Prop ...
- vue2.0 父子组件数据传递prop
vue的一个核心概念就是组件,而组件实例的作用域是孤立的,所以组件之间是不能直接引用其他组件的数据的.极端点举例来说,就是可以在同一个项目中,每一个组件内都可以定义相同名称的数据. data () { ...
- 关于vue.js父子组件数据传递
vue.js中使用props down,events up的原则进行父子组件间的通信,先来记录下props down,看个例子: <div id="app2"> < ...
- Vue2.x之父子组件数据传递
父传子,并且通过fatherEvent接收子组件传过来的值 <template> <div class='father'> <Son :fatherData=" ...
- Vue.js 父子组件相互传递数据
父传子 : 子组件接收变量名=父组件传递的数据 如::f-cmsg="fmsg" 注意驼峰问题 子传父:@子组件关联的方法名 = 父组件接受的方法名 如:@func=" ...
- vue教程3-05 vue组件数据传递、父子组件数据获取,slot,router路由
vue教程3-05 vue组件数据传递 一.vue默认情况下,子组件也没法访问父组件数据 <!DOCTYPE html> <html lang="en"> ...
- 【Vue】Vue中的父子组件通讯以及使用sync同步父子组件数据
前言: 之前写过一篇文章<在不同场景下Vue组件间的数据交流>,但现在来看,其中关于“父子组件通信”的介绍仍有诸多缺漏或者不当之处, 正好这几天学习了关于用sync修饰符做父子组件数据双向 ...
- vue 父子组件属性传递
父子组件属性传递 注意:0.谁被引用,谁就算子组件 1.属性命名最好完全小写,否则需要如下格式转换:myAttr == my-attr 2.引入的vue组件后必须通过 components 注册才能 ...
- Vue父子组件数据双向绑定,子组件可修改props
第一种,子组件通过监听父组件数据,子组件改变数据之后通知给父组件 原文链接:https://blog.csdn.net/m0_37728716/article/details/81776929 父组件 ...
随机推荐
- axios通过django的csrf验证
django会在浏览器的cookie里面保存一项csrftoken=GvzB3ilhlgadishmascacsilreclherlkjhaklsdv3qx4M96XRG88omScDPQaKoMxJ ...
- 自定义ProgressBar的加载效果
三种方式实现自定义圆形页面加载中效果的进度条 To get a ProgressBar in the default theme that is to be used on white/light b ...
- SQLAlchemy-对象关系教程ORM-一对多(外键),一对一,多对多
一:一对多 表示一对多的关系时,在子表类中通过 foreign key (外键)引用父表类,然后,在父表类中通过 relationship() 方法来引用子表的类. 在一对多的关系中建立双向的关系,这 ...
- 洛谷P1972 HH的项链
传送门啦 分析: 题目描述不说了,大意是,求一段区间内不同元素的种数. 看到区间,我们大概先想到的是暴力(然后炸掉).线段树.树状数组.分块. 下面给出的是一种树状数组的想法. 首先,对于每一段区间里 ...
- 20155225 实验二《Java面向对象程序设计》实验报告
20155225 实验二<Java面向对象程序设计>实验报告 一.单元测试 三种代码 知道了伪代码.产品代码.测试代码的关系和用途,并根据老师的例子,按测试代码调试了产品代码. 值得注意的 ...
- OSI & TCP/IP 参考模型
OSI参考模型的结构 OSI划分七层结构的基本原则 网中各结点都具有相同的层次: 不同结点的同等层具有相同的功能: 同一结点内相邻层之间通过接口通信: 每一层可以使用下层提供的服务,并向其上层提供服务 ...
- 树莓派3B安装远程
步骤1:树莓派3安装 RDP SERVER 及VNC SERVER sudo apt-get install -y tightvncserver sudo vncserver 最后才知道一定要加上VN ...
- PHP性能调优---php-fpm中启用慢日志配置(用于检测执行较慢的PHP脚本)
虽然通过nginx accesslog可以记录用户访问某个接口或者网页所消耗的时间,但是不能清晰地追踪到具体哪个位置或者说函数慢,所以通过php-fpm慢日志,slowlog设置可以让我们很好的看见哪 ...
- CI中如何保护RESTful API
步骤5 保护RESTful API 为了保护RESTful API,可以在application/config/rest.php中设置安全保护级别,如下所示: $config['rest_auth'] ...
- hdu 2069 1 5 10 25 50 这几种硬币 一共100个(母函数)
题意: 有50 25 10 5 1 的硬币 一共最多有100枚 输入n输出有多少种表示方法 Sample Input1126 Sample Output413 # include <iostre ...