子传父

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. 十、springcloud之Consul注销实例

    @Autowired //com.ecwid.consul.v1.ConsulClient private ConsulClient consulClient; @PostMapping(" ...

  2. win、mac系统配置本地电脑ip为域名教程

    win系统: 如何修改hosts文件 主机文件原内容如下: #Copyright(c)1993-2009 Microsoft Corp. # #这是Windows的Microsoft TCP / IP ...

  3. 虚拟机 SUSE Linux Enterprise Server 12 SP2 64

    下载地址:https://www.suse.com/zh-cn/products/server/download/ 下载以后使用虚拟机安装即可

  4. 20155225 2016-2017-2《Java程序设计》课程总结

    20155225 2016-2017-2<Java程序设计>课程总结 每周作业链接汇总 预备作业1:新的开始 预备作业2:C语言学习回顾 预备作业3:Linux基础入门和虚拟机的安装 第一 ...

  5. Redis数据类型之Set(四)

          前言:set类似于数学上面的集合概念,包含的元素无序,不能重复,能进行交.并.差操作. 一.内部原理              set数据结构,也是随着元素数目的多少而变化.当set中添加 ...

  6. R语言编程艺术(1)快速入门

    这本书与手上其他的R语言参考书不同,主要从编程角度阐释R语言,而不是从统计角度.因为之前并没有深刻考虑这些,因此写出的代码往往是一条条命令的集合,并不像是“程序”,因此,希望通过学习这本书,能提高编程 ...

  7. django.db.utils.OperationalError: 1045错误

    django.db.utils.OperationalError: (1045, "Access denied for user 'root'@'localhost' (using pass ...

  8. CI框架中site_url()和base_url()的区别

    背景:在使用CI框架的使用经常碰到跳转和路径方面的问题,site_url()和base_url()很容易混淆,下面来说说他们的区别! 假如你config文件里面的base_url和index_page ...

  9. c/c++--strlen()小问题

    int x = 2; char * str = "abcd"; int y = (x - strlen(str)) / 3; printf("%d\n", y) ...

  10. <泛> STL - stack 模拟实现

    今天,看C++Template的时候看到那人写了一个Stack,于是乎,手痒,自己也写了一个,在拜读了STD文件和C++模板元编程某些小节之后,你们就看到了这篇代码. 经过上述一番经历之后,我重新写了 ...