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)


相关推荐

  • c++创建对话框_窗体边框改为对话框样式

    c++创建对话框_窗体边框改为对话框样式本例中涉及到对话框标题栏的自绘,双缓冲位图的显示以及位图按钮类的使用。

  • C++之Error无法解析的外部符号[通俗易懂]

    C++之Error无法解析的外部符号[通俗易懂]C++之VisualStudio的使用遇到问题解决文章目录C++之VisualStudio的使用遇到问题解决问题一无法解析的外部符号问题二无法打开文件lib问题三debug不可以运行,release可以运行问题一无法解析的外部符号[问题描述]在编译中遇到,viaualstudio无法解析的外部符号该符号在外部函数中被引用[问题处理]1.分析问题,这个错误定义为一个:连接错误。2.根本原因是函数虽然申明了,但是没有定义函数的实现3.排查问题出现的几

  • 九款Linux文本编辑器

    九款Linux文本编辑器元老级的工具EmacsKVIM用现代的方式编写代码Arachnophilia  Bluefish:Bluefish标榜其自身是“一款为熟练的Web设计员和程序员而设的编辑器”。KomodoEditNEdit字处理的一些选择Gedit:是LinuxGNOME桌面上一款小巧的文本编辑器。Kate集成的工具QuantaPl

  • java常量有哪些_JAVA常量介绍「建议收藏」

    java常量有哪些_JAVA常量介绍「建议收藏」常量:在程序执行过程中,其值不发生改变的量;1、分类:字面值常量和自定义常量;1、字面值常量有以下几种:字符串常量、小数常量、整数常量、字符常量、布尔常量(true、false)、空常量(null);2、整数常量的表现形式:二进制:由0、1组成,以0b开头;八进制:由0,1,….7组成,以0开头;十进制:由0,1,……9组成,整数默认是十进制;十六进制:由0,1,….9,…

  • eplan激活码分享-激活码分享

    (eplan激活码分享)好多小伙伴总是说激活码老是失效,太麻烦,关注/收藏全栈君太难教程,2021永久激活的方法等着你。IntelliJ2021最新激活注册码,破解教程可免费永久激活,亲测有效,下面是详细链接哦~https://javaforall.cn/100143.htmlMLZPB5EL5Q-eyJsaWNlbnNlSWQi…

  • java键盘钩子_jna test【鼠标 键盘钩子】「建议收藏」

    java键盘钩子_jna test【鼠标 键盘钩子】「建议收藏」jna4.5简单实现后台键盘事件通过jna实现在后台运行,当屏幕按下相对应的按钮时JAVA实现鼠标钩子的源代码仅用JAVA实现全局鼠标钩子的功能,很好很超强,学习下java全局按键键盘钩子java鼠标按键钩子,内含test.java使用实例,hook文件夹是写好的钩子,放到项目源文件下,直接调用。两个jar包是必须建立到项目中的c#Wpf简单鼠标钩子实例一个简单的鼠标钩子例子帮助初学者掌握。基于…

发表回复

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

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