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 父组件 ...
随机推荐
- 【写在NOIP前】
快NOIP了,感觉自己得总结一下吧. 1.要自信啊,相信自己啊,我明明还是有些实力的是吧. 哪怕之前被教练怎么怼,自己别放弃啊 一定要注意心态吧,考试的时候怎么都不能慌,你不会的题也不会有多少人会做的 ...
- 线性表应用--Josephus问题的解法(Python 版)
线性表应用 --Josephus问题的解法(Python 版) Josephus问题描述:假设有n个人围坐一圈,现在要求从第k个人开始报数,报到第m个数的人退出.然后从下一个人开始继续报数并按照相同的 ...
- 利用mysql的binlog恢复数据
MySQL Binary Log也就是常说的bin-log, ,是mysql执行改动产生的二进制日志文件,其主要作用有两个: * 数据回复 * 主从数据库.用于slave端执行增删改,保持与maste ...
- tf.summary.merge_all()
1.自动管理模式 summary_writer = tf.summary.FileWriter('E:/data/tensorflow-master/1.Cnn_Captcha/result/', f ...
- java基础76 web服务器之Tomcat服务器
(注:本文是以“压缩版Tomcat”为例,展开描述的) 一.Tomcat服务器的介绍 1.服务器 1.1.服务器的种类 从物理上讲:服务器就是一台pc机器.至少8核/8G以上.内存至少用T来计算.宽带 ...
- JQ实现情人节表白程序
JQ实现情人节表白页面 效果图: 表白利页,你值得拥有哦! 代码如下,复制即可使用: <!doctype html> <html> <head> <meta ...
- MySQL学习笔记:upper、lower、ucase、lacase——字符串函数
在MySQL中,通过利用upper.lower.ucase.lacase几个函数对字符串进行大小写转换. upper(str)——根据当前字符集映射返回字符串str,并将所有字符更改为大写.默认值是l ...
- 安装VM虚拟机提示 尝试创建目录 C:\Public\documents\SharedVirtual Machines 时发生错误解决方法
把Windows Defender安全中心的“受控制文件夹的访问”给关闭了,然后就可以顺利安装上了. 作者:耑新新,发布于 博客园 转载请注明出处,欢迎邮件交流:zhuanxinxin@foxmai ...
- VS 2015 序列号/密钥/企业版/专业版
专业版:HMGNV-WCYXV-X7G9W-YCX63-B98R2企业版:HM6NR-QXX7C-DFW2Y-8B82K-WTYJV
- 2016-2017 ACM-ICPC Pacific Northwest Regional Contest (Div. 2) 题解
[题目链接] A - Alphabet 最长公共子序列.保留最长公共子序列,剩余的删除或者补足即可. #include <bits/stdc++.h> using namespace st ...