react 学习 父子组件调用

2021-08-10 19:38:26 +08:00
 MaoRong

第一种:

通过定义函数实现 1 、父组件设置含有 this.setState({...})的方法,形参为接收子组件的变量

2 、将方法作为参数传递给子组件

	如<B sub={this.方法.bind(this)]/>

3 、子组件通过 this.props.键名接收函数

	this.props.键名(子组件的数据)

		

第二种:

通过父元素传递的函数在标签中通过箭头函数,直接传参

	如:<button onClick={()=>{this.props.函数(参数)}}></button>
    

父调用子组件方法

1.把子组件的 this 指针挂载成父组件的一个变量,<ChildPage onRef={c=>this.ChildPage=c}></ChildPage>,通过 onRef

2.如果父组件传来该方法 则调用方法将子组件 this 指针传过去,props.onRef(this)

1915 次点击
所在节点    React
13 条回复
Rsl
2021-08-10 19:53:17 +08:00
你是不小心学了 5 年前的教程吧? 看到这些代码回忆起了童年, 哈哈哈...

建议楼主学一学新一点的, 重点学下 hooks 的使用, 爽度激增
vistey
2021-08-10 21:02:58 +08:00
@Rsl 现在是不是全都转 hooks 了?前几个月发现 material ui 好像对 class 基本没什么支持了
JerryCha
2021-08-10 21:35:00 +08:00
别说天翼 3G 了,移动 G3 都没这么慢
dcalsky
2021-08-10 22:42:03 +08:00
@Rsl 哈哈哈哈哈哈回忆起了童年笑死
gouflv
2021-08-10 23:52:35 +08:00
初学者注意:这两种都不是最佳实践
lalalaqwer
2021-08-11 00:21:29 +08:00
不用 Context 的话,hooks 也是用 props 来传递吧。很久没写 react 了,之前还是试着写 hooks 的,想了好久没想明白这类简单的调用怎么用 hooks 呀
duan602728596
2021-08-11 09:42:01 +08:00
初学者注意:父调用子组件方法千万不要这么写
MaoRong
2021-08-11 10:00:03 +08:00
@Rsl 多谢,看的教程可能太老了,我去看看 hooks 。
qrobot
2021-08-11 10:09:15 +08:00
@lalalaqwer 别问,问就是 dispatch
darkengine
2021-08-11 10:36:13 +08:00
@MaoRong 直接去啃英文的 React 官方文档吧,不要看二手的了,实效性没有保障。
XTTX
2021-08-11 10:36:56 +08:00
自从可以写 functional component, 我就再也没有写过 class component. this 这个 this 那个 已经不记得了。。。
q673115816
2021-08-11 13:19:16 +08:00
现在应该是 forwordref 拿子组件吧
ChrisV5
2021-08-11 17:08:42 +08:00
hooks 怎么解决父子组建传 event...

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/794911

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX