react 父子传值_react 父子组件传值 兄弟组件传值「建议收藏」

react 父子传值_react 父子组件传值 兄弟组件传值「建议收藏」一、子向父组件传值方法一:父组件//方法parentFn(data1,data2,e){//按照参数排列最后一个是eventconsole.log(data1,data2,e)//输出12event内容}//渲染render(){return(//子组件)}子组件//渲染render(){return(//可以直接获取props调用也可以重新定义在方法中调用子…

大家好,又见面了,我是你们的朋友全栈君。

一、子向父组件传值

方法一:

父组件

//方法

parentFn(data1, data2, e) {

// 按照参数排列 最后一个是event

console.log(data1, data2, e) //输出 1 2 event内容

}

//渲染

render() {

return (

//子组件

)

}

子组件

// 渲染

render() {

return (

//可以直接获取props调用 也可以重新定义在方法中调用

子组件

);

}

方法二:

参考 通过ref获取子组件的值 可以看 `二、子组件向父组件传方法二` 一样的意思

二、子组件向父组件传方法

方法一:传值绑定this

父组件

//父 – 点击调用 子

clickChild = (e) => {

this.child.myChild()

}

//渲染

render() {

return (

//子组件

{this.child = ref}} }>

//点击调用

click

)

}

子组件

//周期

componentDidMount() {

this.props.onRef(this)

}

//给父组件用的方法

myChild = () => log(‘父调子fn’)

// 渲染

render() {

return (

子组件

);

}

方法二:直接绑定ref

父组件

//父 – 点击调用 子

clickChild = (e) => {

this.refs.SideContent.myChild();

}

//渲染

render() {

return (

//子组件

//点击调用

click

)

}

子组件

//给父组件用的方法

myChild = () => log(‘父调子fn’)

// 渲染

render() {

return (

子组件

);

}

三、父向子传值

父组件

//渲染

render() {

return (

//子组件

)

}

子组件

// 渲染

render() {

return (

子组件 {this.props.name}

);

}

四、父向子传方法

参考 `一、子向父组件传值方法一` 一样的 传个方法过去 子组件调用了 就是掉了父的方法了

五、兄弟组件传值 / 各种组件传值 封装的像vue的Bus中央事件总线 及其优秀

有兴趣的可以看一下 https://www.cnblogs.com/chen-yi-yi/p/11152391.html vue的bus传值

记得两个组件中 都需要引入js 使用方法如下

传值

eventProxy.trigger(‘名字’, 值)

取值

eventProxy.on(‘名字’, 值 => {

log(值)

this.setState({

//更新的state 或者干点别的

}, () => {

//做你想做的事

})

})

如果传多个值 可以拼成对象 或者 写成数组 这个js不支持序列传值

例如:

传值

eventProxy.trigger(‘名字’, [‘1′,’2’])

取值

eventProxy.on(‘名字’, resArr => {

log resArr[0] //输出1

log resArr[1] //输出2

})

这个封装的js也不是我写的 不记得哪位大佬了 几个月以前使用的 如果是你的 可以留下链接 我在贴原处

js 地址:我放在另一个页 不然太多了

https://www.cnblogs.com/chen-yi-yi/p/13566856.html

这个方法我特别喜欢~~~ 经常使用

六、redux

简单的传值满足不了你的需求 或者 当多个组件共用一个数据 频繁传值时 使用redux 状态管理器

第一步安装:npm install –save redux

第二步: -‘嘻嘻’ -下次单独写一篇~~~~

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/145708.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • ZDH大数据采集平台-采集mysql数据到hdfs

    ZDH大数据采集平台-采集mysql数据到hdfs目录项目源码创建mysql数据源创建本地hdfs数据源配置采集任务配置调度点击执行记录查看具体日志高级使用项目源码数据采集平台管理端https://github.com/zhaoyachao/zdh_web数据采集平台服务https://github.com/zhaoyachao/zdh_serverweb端在线查看http://zycblog.cn:8081/login用户名:zyc密码:123456界面只是为了参考功能,底层的数据.

  • 云之遥全攻略 上「建议收藏」

    云之遥全攻略 上「建议收藏」转自dakkifox作者的和讯博客,很详尽很有用的一篇攻略。原贴地址:http://dakkifox.blog.hexun.com/45908818_d.html我是傻瓜分割线所谓傻瓜版,就是你照

  • Oracle 11g Rac搭建「建议收藏」

    Oracle 11g Rac搭建「建议收藏」Oracle11gRac搭建(RedHat6.9+Oracle11.2.0.4)系统安装规划网络规划用户组规划存储规划配置yum源,网络规划,hosts文件等(双节点执行)如果是64bit,需要检查以下的Packages。以下重复包名称的部分是64bit,注明32bit的是32bitpackages。如果是32bitOS,那么重复包名的只需要32…

  • 群、环、域的概念,定义和理解.

    群、环、域的概念,定义和理解.群、环、域的概念,定义和理解.以下链接很好的解释了群环域的概念.http://sparkandshine.net/algebraic-structure-primer-group-ring-field-vector-space/群的定义:(Group)群是一个特殊的集合,这个集合需要满足4条性质.1,2,3,4blablabla,就叫1个群.也叫群公理定义.我这里要说的是,并不是每个集合都能够同时满足这4条性质的.例如第一条:totality,整体性或封闭性.集合中的两个

  • 仿朋友圈相册图片选择以及画廊效果「建议收藏」

    仿朋友圈相册图片选择以及画廊效果「建议收藏」仿朋友圈相册图片选择以及画廊效果1.效果展示2.导入相关第三方库依赖3.编写选择图片页面a.编写布局b.编写Activityc.相册选择工具类部分代码d.相册4宫图适配器4.编写画廊页面a.编写画廊页面b.编写Activityc.画廊适配器5.源码1.效果展示该demo适配Android6、7、10。画廊效果,支持缩放效果。视频展示:(等我B站视频审核通过再来修改)部分截图:文章有点长,如果没时间就拉到最底下下载源码,再给个一键三联哈(* ̄︶ ̄)2.导入相关第三方库依赖站在巨人的肩膀上,

  • 【金融市场基础知识】——金融市场体系

    【金融市场基础知识】——金融市场体系阅读之前看这里????:博主是一名正在学习证券知识的学生,在每个领域我们都应当是学生的心态,也不应该拥有身份标签来限制自己学习的范围,所以博客记录的是在学习过程中一些总结,也希望和大家一起进步,在记录之时,未免存在很多疏漏和不全,如有问题,还请私聊博主指正。博客地址:天阑之蓝的博客,学习过程中不免有困难和迷茫,希望大家都能在这学习的过程中肯定自己,超越自己,最终创造自己。由于自己的学习兴趣,所以决定学习证券从业的知识,也继续写博客来进行总结和归纳。目录金融市场体系一、金融市场概述1、金融市场的概念和

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号