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

前辈们,求助 React ref 的相关知识

  •  
  •   me221 · 2022-01-11 13:38:45 +08:00 · 1962 次点击
    这是一个创建于 808 天前的主题,其中的信息可能已经有所发展或是发生改变。

    小弟最近在学习 react,在做一个 demo 的时候遇到一个问题: 点击 header 组件的 full screen 按钮,将整个应用都全屏. 使用了 ahooks 的一个useFullscreen.
    现在的难点在于:我如何使用 ref 获得到最外层的组件(APP).
    尝试了 forwordRef 好像只能从外往内(app-->header)也就是从 app 可以获得 header 的 ref 而不能从内往外(header-->app)不能从 header 获得 app 的 ref.

    小弟也刚开始学习 React,也不知道表述的清楚不清楚.在线求大佬们解答!!!

    image.png

    11 条回复    2022-01-12 08:25:50 +08:00
    SmiteChow
        1
    SmiteChow  
       2022-01-11 13:40:36 +08:00
    使用 context
    Pastsong
        2
    Pastsong  
       2022-01-11 13:41:42 +08:00
    document.getElementById
    vHypnos
        3
    vHypnos  
       2022-01-11 13:48:22 +08:00
    你也可以 props 传进去,不过不太好, 比较好的方案是写个 Context 包一层 Layout
    shunia
        4
    shunia  
       2022-01-11 14:41:28 +08:00
    1. 自己写一个 globalHook ,用来存取 ref
    2. App 里获取到 ref 后在 effect 里存到 globalHook 里
    3. 用的地方通过 globalHook 获取 ref
    Cosine2012
        5
    Cosine2012  
       2022-01-11 16:00:53 +08:00
    ref 最好不要直接传来传去。可以把全屏的逻辑写在最外层,作为回调传到里面。
    duduaba
        6
    duduaba  
       2022-01-11 16:09:11 +08:00
    js 中黑魔法特别多,不想繁琐可以挂到 window 上。。。
    iPhoneilike
        7
    iPhoneilike  
       2022-01-11 16:16:43 +08:00
    const [, { enterFullscreen }] = useFullscreen(() => document.getElementById('App'));

    用这个
    gouflv
        8
    gouflv  
       2022-01-11 16:47:48 +08:00 via iPhone
    context 能解决层级传递的问题,不过全屏跟 react 关系不大,走 dom 就好了
    unnamedhao
        9
    unnamedhao  
       2022-01-11 17:05:30 +08:00
    用 redux 吧
    jguo
        10
    jguo  
       2022-01-11 17:23:32 +08:00
    文档不是说了吗,DOM element or ref
    me221
        11
    me221  
    OP
       2022-01-12 08:25:50 +08:00
    谢谢 v 站的大佬们. context 可能是最优解决. 最后使用 ById 解决了. 之后学习到了再去重构吧😂
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   5397 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 29ms · UTC 07:36 · PVG 15:36 · LAX 00:36 · JFK 03:36
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.