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 父组件 ...
随机推荐
- Flask:文件配置方式实践及其中的各种问题记录
Windows 10家庭中文版,Python 3.6.4,Flask 1.0.2, 提示: 1.请查看本文后面的“18-07-17 11:18重大纠正” ! 2.flask run命令运行时传入参数 ...
- python并行计算(持续更新)
工作中需要对tensorflow 的一个predict结果加速,利用python中的线程池 def getPPLs(tester,datas): for line in datas: tester(l ...
- High-Speed Tracking with Kernelized Correlation Filters(二)
首先看看get_features函数. 首先判断是hog特征还是gray,分两种情况. 如果是hog特征,调用fhog函数,返回x,并将矩阵 ...
- 洛谷P3088 挤奶牛
传送门啦 这个题也是一个单调队列来优化的 $ dp $ ,我们考虑这个题,这个题让我们求出有多少奶牛会觉得拥挤,如果我们还像琪露诺那个题那样单纯用一次单调队列肯定是不行的,因为牛觉不觉得拥挤是受左右的 ...
- 奇妙的CSS之伪类与伪元素
我们都知道,在CSS中有很多选择器,例如id(#), class(.),属性[attr],这些虽然可以满足一些需要,但有时候还力有未逮.伪类和伪元素就提供了一个有益的补充,可以使我们更高效编码.伪类和 ...
- MyBatis3-实现MyBatis分页
此文章中的例子是沿用上一篇文章http://www.cnblogs.com/EasonJim/p/7055499.html的Spring MVC集成的例子改装的. MyBatis分页有以下方式实现: ...
- AdvStringGrid 滚动条问题
1.默认水平方向 滚动条是 小的 滚动的时候 数据会随着滚动 而 滚动的. 2.默认垂直方向 滚动条是 小的 滚动的时候 数据不会随着滚动 而滚动的.ScrollSynch := True; 垂直方向 ...
- overlay实现容器跨主机通信
本节内容: Docker容器跨主机通信方案 环境信息 升级内核 安装docker 防火墙设置和开启内核转发 安装启动consul 启动Docker 创建overlay network 创建容器 测试容 ...
- ASP.NET:Forms身份验证和基于Role的权限验证
从Membership到SimpleMembership再到ASP.NET Identity,ASP.NET每一次更换身份验证的组件,都让我更失望.Membership的唯一作用就是你可以参考它的实现 ...
- Python 爬虫个人记录(一)豆瓣电影250
一.爬虫环境 Python3.6 scrapy1.4 火狐浏览器 qq浏览器 二.scrapy shell 测试并获取 xpath 1.进入scrapy shell 2 .获取html fetch(' ...