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

react-router-dom v6 里的 Outlet 子组件如何向父组件传参?

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

    父向子传可以用 useOutletContext ,但是子向父传就无法通过 useOutletContext 了

    有什么办法做到<Ooulet />里的子组件给父组件传参?

    需求是父组件需要响应<Ooulet />子组传递过来的数据

    第 1 条附言  ·  103 天前
    已解决,如 1 楼所述:和 props 一样传函数即可
    12 条回复    2022-03-23 14:30:05 +08:00
    ahwwh1994
        1
    ahwwh1994  
       104 天前   ❤️ 1
    传函数过去啊,和 props 一样的啊
    Chism
        2
    Chism  
    OP
       104 天前
    @ahwwh1994
    <Ooulet />里无法传函数回去
    liuzhaowei55
        3
    liuzhaowei55  
       104 天前 via iPhone
    父组件用 useState 定义,然后把 state setState 都传下去,子组件 setState 就可以了
    liuzhaowei55
        4
    liuzhaowei55  
       104 天前 via iPhone
    @Chism 用中括号把 state setState 放一起往下传
    Chism
        5
    Chism  
    OP
       104 天前 via Android
    @liuzhaowei55
    原来如此,我试试。
    之前没用 router 时,直接 const 定义个函数给子组件,子组件执行函数,父组件也响应。
    用了 Outlet 就不行,我试试你的方法,多谢。
    agdhole
        6
    agdhole  
       104 天前
    用个状态管理库也可以,比如 recoil
    ahwwh1994
        7
    ahwwh1994  
       104 天前   ❤️ 2
    Chism
        8
    Chism  
    OP
       103 天前
    @ahwwh1994
    抱歉,你是对的,已验证。多谢回帖
    Chism
        9
    Chism  
    OP
       103 天前
    @agdhole
    周下载 20 万,应该不错,多谢提醒
    KalaSearch
        10
    KalaSearch  
       97 天前
    可以尝试:

    ```

    type AuthUserContextType = {
    authedUser: UserResponse;
    };

    const useAuthUserContext = (): AuthUserContextType => {
    return useOutletContext<AuthUserContextType>();
    };

    // 然后在你的组件中:

    const ctx: AuthUserContextType = {
    authedUser: YOUR_DATA,
    };

    return <Outlet context={ctx} />;

    ```
    KalaSearch
        11
    KalaSearch  
       97 天前
    oops... 抱歉没整理好格式

    这个问题上周刚碰到,你感兴趣的话我可以写篇博客说一下
    Chism
        12
    Chism  
    OP
       97 天前
    @KalaSearch
    我按照 1 楼的方法也成功了。。
    关于   ·   帮助文档   ·   API   ·   FAQ   ·   我们的愿景   ·   广告投放   ·   感谢   ·   实用小工具   ·   4103 人在线   最高记录 5497   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 22ms · UTC 09:13 · PVG 17:13 · LAX 02:13 · JFK 05:13
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.