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

› React

This topic created in 1524 days ago, the information mentioned may be changed or developed.

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

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

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

Supplement 1 · Mar 16, 2022

已解决，如 1 楼所述：和 props 一样传函数即可

组件

ooulet

outlet

向子传

12 replies • 2022-03-23 14:30:05 +08:00

ahwwh1994

Mar 16, 2022

传函数过去啊，和 props 一样的啊

Chism

Mar 16, 2022

@ahwwh1994
<Ooulet />里无法传函数回去

liuzhaowei55

Mar 16, 2022 via iPhone

父组件用 useState 定义，然后把 state setState 都传下去，子组件 setState 就可以了

liuzhaowei55

Mar 16, 2022 via iPhone

@Chism 用中括号把 state setState 放一起往下传

Chism

Mar 16, 2022 via Android

@liuzhaowei55
原来如此，我试试。
之前没用 router 时，直接 const 定义个函数给子组件，子组件执行函数，父组件也响应。
用了 Outlet 就不行，我试试你的方法，多谢。

agdhole

Mar 16, 2022

用个状态管理库也可以，比如 recoil

ahwwh1994

Mar 16, 2022

@Chism https://stackblitz.com/edit/react-ts-jvwdyt?file=index.tsx 写了个 demo

Chism

Mar 16, 2022

@ahwwh1994
抱歉，你是对的，已验证。多谢回帖

Chism

Mar 16, 2022

@agdhole
周下载 20 万，应该不错，多谢提醒

KalaSearch

Mar 23, 2022

可以尝试:

```

type AuthUserContextType = {
authedUser: UserResponse;
};

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

// 然后在你的组件中:

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

return <Outlet context={ctx} />;

```

KalaSearch

Mar 23, 2022

oops... 抱歉没整理好格式

这个问题上周刚碰到，你感兴趣的话我可以写篇博客说一下

Chism

Mar 23, 2022

@KalaSearch
我按照 1 楼的方法也成功了。。