子组件

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. 讨厌的adb占用

    adb重启的方法 2018年06月13日 14:59:47 丽闪无敌 阅读数:11969   执行以下命令: D:\android-sdks\platform-tools>adb kill-se ...

  2. python学习---50行代码实现图片转字符画2

    from PIL import Image codeLib = '''@B%8&WM#*oahkbdpqwmZO0QLCJUYXzcvunxrjft/\|()1{}[]?-_+~<> ...

  3. vue中bus.$on事件被多次绑定

    问题描述:只要页面没有强制刷新,存在组件切换,bus.$on方法会被多次绑定,造成事件多次触发 解决办法一:在每次调用方法前先解绑事件( bus.$off ),然后在重新绑定( bus.$on ) b ...

  4. 深入理解java集合

    集合 Java集合分为三大接口:①Collection ②Map ③Iterator

  5. 浅谈2-SAT

    引入: 相信大家都了解过差分约束系统.差分约束系统的大体意思就是给出一些有某种关系的变量,问你是否有某种赋值使得这些关系全部成立 其实\(2-SAT\)的题目描述和这个很像(虽然解法不一样) 那么\( ...

  6. Android 多分辨率与不同语言适配

    一.适配不同国家语言 智能手机系统设置里各国语言的选项,然后我们项目里可以通过资源目录实现适配语言.我们知道工程的根目录有个res/的目录,res/下有一个资源类型的目录,其中有个values/str ...

  7. slub

    1.前言 在Linux中,伙伴系统(buddy system)是以页为单位管理和分配内存.但是现实的需求却以字节为单位,假如我们需要申请20Bytes,总不能分配一页吧!那岂不是严重浪费内存.那么该如 ...

  8. leetcode 34在排序数组中查找元素的第一个和最后一个位置

    class Solution { public: vector<int> searchRange(vector<int>& nums, int target) { ve ...

  9. 无法在WEB服务器上启动调试,Web 服务器配置不正确

    访问IIS元数据库失败 思考可能是次序出了问题,解决 1.打开CMD,进入 C:\WINDOWS\Microsoft.NET\Framework\v2.0.50727 2.输入 aspnet_regi ...

  10. Git 提交 .gitignore文件

    问题描述 不知道小伙伴有木有遇到这种情况:想在工程里增加 .gitignore 文件,用于在以后提交后,过滤哪些文件或者目录. 但是,在当前工程的根目录下,执行如下执行命令后,依然不能把 .gitig ...