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

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

  •  
  •   Chism · 2022-03-16 16:17:02 +08:00 · 2438 次点击
    这是一个创建于 743 天前的主题,其中的信息可能已经有所发展或是发生改变。

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

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

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

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

    ```

    type AuthUserContextType = {
    authedUser: UserResponse;
    };

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

    // 然后在你的组件中:

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

    return <Outlet context={ctx} />;

    ```
    KalaSearch
        11
    KalaSearch  
       2022-03-23 13:06:43 +08:00
    oops... 抱歉没整理好格式

    这个问题上周刚碰到,你感兴趣的话我可以写篇博客说一下
    Chism
        12
    Chism  
    OP
       2022-03-23 14:30:05 +08:00
    @KalaSearch
    我按照 1 楼的方法也成功了。。
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   3017 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 26ms · UTC 15:00 · PVG 23:00 · LAX 08:00 · JFK 11:00
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.