V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
MaoRong
V2EX  ›  React

react 学习 父子组件调用

  •  
  •   MaoRong · 2021-08-10 19:38:26 +08:00 · 2111 次点击
    这是一个创建于 1180 天前的主题,其中的信息可能已经有所发展或是发生改变。

    第一种:

    通过定义函数实现 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)

    13 条回复    2021-08-11 17:08:42 +08:00
    Rsl
        1
    Rsl  
       2021-08-10 19:53:17 +08:00   ❤️ 1
    你是不小心学了 5 年前的教程吧? 看到这些代码回忆起了童年, 哈哈哈...

    建议楼主学一学新一点的, 重点学下 hooks 的使用, 爽度激增
    vistey
        2
    vistey  
       2021-08-10 21:02:58 +08:00 via Android
    @Rsl 现在是不是全都转 hooks 了?前几个月发现 material ui 好像对 class 基本没什么支持了
    JerryCha
        3
    JerryCha  
       2021-08-10 21:35:00 +08:00
    别说天翼 3G 了,移动 G3 都没这么慢
    dcalsky
        4
    dcalsky  
       2021-08-10 22:42:03 +08:00
    @Rsl 哈哈哈哈哈哈回忆起了童年笑死
    gouflv
        5
    gouflv  
       2021-08-10 23:52:35 +08:00 via iPhone
    初学者注意:这两种都不是最佳实践
    lalalaqwer
        6
    lalalaqwer  
       2021-08-11 00:21:29 +08:00
    不用 Context 的话,hooks 也是用 props 来传递吧。很久没写 react 了,之前还是试着写 hooks 的,想了好久没想明白这类简单的调用怎么用 hooks 呀
    duan602728596
        7
    duan602728596  
       2021-08-11 09:42:01 +08:00
    初学者注意:父调用子组件方法千万不要这么写
    MaoRong
        8
    MaoRong  
    OP
       2021-08-11 10:00:03 +08:00
    @Rsl 多谢,看的教程可能太老了,我去看看 hooks 。
    qrobot
        9
    qrobot  
       2021-08-11 10:09:15 +08:00
    @lalalaqwer 别问,问就是 dispatch
    darkengine
        10
    darkengine  
       2021-08-11 10:36:13 +08:00
    @MaoRong 直接去啃英文的 React 官方文档吧,不要看二手的了,实效性没有保障。
    XTTX
        11
    XTTX  
       2021-08-11 10:36:56 +08:00
    自从可以写 functional component, 我就再也没有写过 class component. this 这个 this 那个 已经不记得了。。。
    q673115816
        12
    q673115816  
       2021-08-11 13:19:16 +08:00 via Android
    现在应该是 forwordref 拿子组件吧
    ChrisV5
        13
    ChrisV5  
       2021-08-11 17:08:42 +08:00
    hooks 怎么解决父子组建传 event...
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1111 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 23ms · UTC 19:24 · PVG 03:24 · LAX 12:24 · JFK 15:24
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.