子组件

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. TP5 未定义变量:XXX

    TP5开发模式下报错级别非常高,哪怕变量未定义都直接抛出异常 应用公共函数文件  路径: application/common.php 在common.php文件写入 // 异常错误报错级别, err ...

  2. mysql5.6 varchar长度不同的情况下group by的效率

    varchar长度短的情况下,基于这个字段的group by效率更高.所以开发在设计表的时候要使该字段在满足业务需求的情况下尽可能的小. ps:本想找源码看看代码那是怎么处理的,直接用vim看文件太累 ...

  3. HearthBuddy 第一次调试

    HearthBuddy https://www.jiligame.com/70639.html 解压缩包,打开hearthbuddy.exe直接运行就可以:不用替换mono.dll直接可用:不需要校验 ...

  4. What is the most efficient way to deep clone an object in JavaScript?

    What is the most efficient way to deep clone an object in JavaScript? Reliable cloning using a libra ...

  5. 洛谷P1983车站分级

    洛谷\(P1983\)车站分级(拓扑排序) 目录 题目描述 题目分析 思路分析 代码实现 题目描述 题目在洛谷\(P1983\)上 ​ 题目: 一条单向的铁路线上,依次有编号为 \(1, 2, -, ...

  6. Android 获取视频照片与刷新媒体库

    1.获取本地所有视频 public void getLoadMedia() { Cursor cursor = UILApplication.instance.getApplicationContex ...

  7. c# 单元测试 ,对静态方法(static)和私有方法(private) 进行单元测试

    利用反射: /// <summary> /// 调用静态方法 /// </summary>akf /// <param name="t">类全名 ...

  8. leetcode 509斐波那契数列

    递归方法: 时间O(2^n),空间O(logn) class Solution { public: int fib(int N) { ?N:fib(N-)+fib(N-); } }; 递归+记忆化搜索 ...

  9. 代码实现:求s=a+aa+aaa+aaaa+aa...a的值,其中a是一个数字

    import java.util.Scanner; /*题目:求s=a+aa+aaa+aaaa+aa...a的值,其中a是一个数字. 例如2+22+222+2222+22222(此时共有5个数相加), ...

  10. flutter flutter_swiper使用

    flutter_swiper flutter最强大的siwiper, 多种布局方式,无限轮播,Android和IOS双端适配. 更多详情信息请移步:https://blog.csdn.net/u011 ...