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

react 学习 父子组件调用

  •  
  •   MaoRong · 120 天前 · 1266 次点击
    这是一个创建于 120 天前的主题,其中的信息可能已经有所发展或是发生改变。

    第一种:

    通过定义函数实现 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  
       120 天前   ❤️ 1
    你是不小心学了 5 年前的教程吧? 看到这些代码回忆起了童年, 哈哈哈...

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