子传父

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. 随机数生成 && 生成执行锁

    生成随机数列: openssl rand -base64 uuidgen echo $RANDOM | md5sum echo $RANDOM | sha256sum 随机小写10个字母 随机数: [ ...

  2. 一张图教会CSS3倒影

    分享 示例图片 在CSS3之前,想要实现示例图片这样的一个倒影效果一般只能通过处理图片的方式,而CSS3问世之后,想要实现这样的效果变得非常简单,只需一个CSS3属性就可以轻松实现了. 这就是今天所要 ...

  3. JS实现幸运抽奖页面

    JS实现简单的幸运抽奖页面 效果图: 图片素材 : 代码如下,复制即可使用: <!DOCTYPE html> <html> <head lang="en&quo ...

  4. json字符串与java对象的相互转换(jackson)

    1.java对象转换为json字符串 package com.chichung.json; import com.fasterxml.jackson.core.JsonProcessingExcept ...

  5. Java OOM学习

    转载自原文: 什么是java OOM?如何分析及解决oom问题? 什么是OOM? OOM,全称"Out Of Memory",翻译成中文就是"内存用完了",表现 ...

  6. Centos7.3安装vsftp服务

    我们需要向centos操作系统的服务器上上传文件或者下载文件,这时候,ftp有必要安装下, 我们选择主流的vsftp: 第一步:安装vsftp yum install -y vsftpd 第二步:设置 ...

  7. Effective STL 学习笔记 Item 17: Swap Trick

    假设有若干对象存于一个 vector 中: class Widget; vector<Widget> vw; 后来由于某些原因,从该容器中删除了若干对象(参考erase-remove id ...

  8. Celery 框架学习笔记(生产者消费者模式)

    生产者消费者模式 在实际的软件开发过程中,经常会碰到如下场景:某个模块负责产生数据,这些数据由另一个模块来负责处理(此处的模块是广义的,可以是类.函数.线程.进程等).产生数据的模块,就形象地称为生产 ...

  9. 一步一步学习IdentityServer3 (8)

    IdentityServer3结合Hangfire及Cookies中间件实现授权 Idr3数据库Token过期管理 GlobalConfiguration.Configuration.UseSqlSe ...

  10. LeetCode 80. 删除排序数组中的重复项 II

    LeetCode 80. 删除排序数组中的重复项 II