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 父组件 ...
随机推荐
- docker安装(2018-03-14版本)
[安装] 说明一: CENTOS或RHEL自带的docker源不一定是最新的,所以必须到docker.com去找到最新的yum源进行安装 说明二: docker的安装方式有两种: 1. 从指定网站获取 ...
- Python爬虫之三种网页抓取方法性能比较
下面我们将介绍三种抓取网页数据的方法,首先是正则表达式,然后是流行的 BeautifulSoup 模块,最后是强大的 lxml 模块. 1. 正则表达式 如果你对正则表达式还不熟悉,或是需要一些提 ...
- java8 - 时间
import java.time.DayOfWeek; import java.time.Duration; import java.time.Instant; import java.time.Lo ...
- spring boot在控制台输出彩色日志
阅读org.springframework.boot.context.config.AnsiOutputApplicationListener 源码发现,通过向JVM传递参数,可以在控制台打印彩色日志 ...
- 【LOJ】#2032. 「SDOI2016」游戏
题解 看错题了,以为单次修改相当于一个覆盖,后来才明白"添加"-- 就相当于添加很多线段求最小值 首先这个等差数列添加的方式比较烦人,我们拆开两条链,一条s到lca,一条lca到t ...
- File.separator与 \分隔符
在Windows下的路径分隔符和Linux下的路径分隔符是不一样的,当直接使用绝对路径时,跨平台会暴出“No such file or diretory”的异常. 比如说要在temp目录下建立一个te ...
- 基于Thinkphp3.2的qq第三方oauth认证登录扩展类
基于Thinkphp3.2的qq第三方oauth认证登录扩展类,由于腾讯oauth sdk写的太多,不能与thinkphp和好的结合,最终想法讲腾讯oauth sdk写成tp的扩展类先看代码,将代码保 ...
- CF632D Longest Subsequence
D. Longest Subsequence time limit per test 2 seconds memory limit per test 256 megabytes input stand ...
- BigDecimal 两种方式
第一种: Double a=0.06; Double b=0.01; BigDecimal addend = BigDecimal.valueOf(a); BigDecimal augend = Bi ...
- ICMP隧道工具ptunnel
ICMP隧道工具ptunnel 在一些网络环境中,如果不经过认证,TCP和UDP数据包都会被拦截.如果用户可以ping通远程计算机,就可以尝试建立ICMP隧道,将TCP数据通过该隧道发送,实现不受 ...