子组件

state = {
msg: 'a'
}
render(){
return<h1>{this.state.msg}</h1>
}
setInfo = (val)=>{
//这里的val就是父组件通过调用这个方法,传的参数,在这里val的值为aaa
this.setState({
msg: val
})
}

父组件

render(){
return <div><Test ref="myTest">
<button onClick={()=>this.show()}/>
</div>
}
show = ()=>{
this.refs.myTest.setInfo('aaa')
}
注意:在这里父组件通过点击按钮调用show方法,进而调用子组件中的一个setInfo方法,通过传参,而修改了子组件的的msg值。切记: 在react中如果要修改数据的话一定要使用setState()方法才可以。

本文链接:https://blog.csdn.net/zsm4623/article/details/86594275

react中父组件给子组件传值的更多相关文章

  1. artdialog4.1.7 中父页面给子页面传值

    artdialog4.1.7中父页面给子页面传值时看了一些网友的解决方法: 在父页面声明全局变量 var returnValue=“ ”,子页面用art.dialog.opener.returnVal ...

  2. layer.open中父页面向子页面传值

    1.咱先看图说话 父list.jsp 子operate.jsp实现的代码1 在父页面上完成对子页面的数据渲染 function setData(data) { var lay=layer.open({ ...

  3. vue中父级与子组件生命周期的先后顺序

    1.vue的生命周期 2.views/createrCustormer.vue为父级     <template>     <expressService />   </ ...

  4. 九、React中的组件、父子组件、React props父组件给子组件传值、子组件给父组件传值、父组件中通过refs获取子组件属性和方法

    一.概述 React中的组件: 解决html 标签构建应用的不足. 使用组件的好处:把公共的功能单独抽离成一个文件作为一个组件,哪里里使用哪里引入. [父子组件]:组件的相互调用中,我们把调用者称为父 ...

  5. react学习-react父组件给子组件传值与设置传值类型以及是否必传参数

    react 父组件给子组件传参时,父组件直接在引入的子组件内写入要传递的参数即可 <HeaderComponent title={"传递的参数"}></Heade ...

  6. React中父组件与子组件之间的数据传递和标准化的思考

    React中父组件与子组件之间的数据传递的的实现大家都可以轻易做到,但对比很多人的实现方法,总是会有或多或少的差异.在一个团队中,这种实现的差异体现了每个人各自的理解的不同,但是反过来思考,一个团队用 ...

  7. Vue中父组件向子组件传值

    Vue中父组件向子组件传值 相关Html: <!DOCTYPE html> <html lang="en"> <head> <meta c ...

  8. Vue中的父组件给子组件传值

    父子组件传值: 父组件在调用子组件的地方,添加一个自定义的属性,属性的值就是你要传递给子组件的数据,如果值是一个变量,那么需要使用到绑定属性: 在子组件定义的地方,添加一个props选项,值为一个数组 ...

  9. VUe.js 父组件向子组件中传值及方法

    父组件向子组件中传值 1.  Vue实例可以看做是大的组件,那么在其内部定义的私有组件与这个实例之间就出现了父子组件的对应关系. 2. 父子组件在默认的情况下,子组件是无妨访问到父组件中的数据的,所以 ...

  10. Vue中,父组件向子组件传值

    1:在src/components/child/文件夹下,创建一个名为:child.vue的子组件 2:在父组件中,设置好需要传递的数据 3:在App.vue中引入并注册子组件 4:通过v-bind属 ...

随机推荐

  1. nginx+uWSGI+django+virtualenv+supervisor发布web服务器流程

    导论 WSGI是Web服务器网关接口.它是一个规范,描述了Web服务器如何与Web应用程序通信,以及Web应用程序如何链接在一起以处理一个请求,(接收请求,处理请求,响应请求)基于wsgi运行的框架有 ...

  2. 套接字之msghdr结构

    用户端在使用sendmsg/recvmsg发送或者接收数据时,会使用msghdr来构造消息,其对应的内核结构为user_msghdr:其中msg_iov向量指向了多个数据区,msg_iovlen标识了 ...

  3. linux新建用户tab无法补全命令

    查看passwd cat /ect/passwd 发现root用户的shell是/bin/bash 普通用户的shell是/bin/sh 修改普通用户的为/bin/bash即可

  4. 搭建SVN服务器时报错:0x80004002

    一.错误信息 Cannot query proxy blanket: no such interface supported (0x80004002) 二.解决方案 这个错误只会在有NVIDIA独立显 ...

  5. GIS开源程序收集

    每一个项目包含以下信息: 名称 主题 分类 描述 开始时间 语言 许可 演示网址 项目网址 成熟度 活跃度 评价   分类包括:GIS基础函数库.GIS控件.GIS桌面程序.GIS数据引擎.WEBGI ...

  6. PyQt4 Python GUI窗体应用程序

    目录 目录 前言 软件环境 PyQT简介 Setup PyCharm Setup SIP Setup PyQt4 测试PyQt是否安装成功 常见错误 最后 前言 还是一句老话,公司要什么我就做什么.这 ...

  7. 52N皇后II

    题目:给定一个整数 n,返回 n 皇后不同的解决方案的数量. 来源:https://leetcode-cn.com/problems/n-queens-ii/ 法一: 自己的代码  时间超过百分之90 ...

  8. I/O流之---FileInputStream和FileOutputStream的使用

    FileInputStream和FileOutputStream都属于文件字节流. 通常我们可以用来做文件的复制操作,如下: import java.io.File; import java.io.F ...

  9. 【miscellaneous】网络摄像机

    自20世纪90年代初期网络摄像机开始诞生,产业已历经20余年的演变. "IP大时代"的口号在安防领域已响彻已久,但也是自2015年至今才开使有了真正的底气.当全面超越模拟已尘埃落定 ...

  10. 将Lambda表达式作为参数传递并解析-在构造函数参数列表中使用Lambda表达式

    public class DemoClass { /// <summary> /// 通过Lambda表达式,在构造函数中赋初始值 /// </summary> /// < ...