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

[Chism]

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

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

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

[ahwwh1994]

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

[Chism]

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

[liuzhaowei55]

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

[liuzhaowei55]

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

[Chism]

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

[agdhole]

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

[ahwwh1994]

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

[Chism]

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

[Chism]

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

[KalaSearch]

可以尝试:

```

type AuthUserContextType = {
authedUser: UserResponse;
};

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

// 然后在你的组件中:

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

return <Outlet context={ctx} />;

```

[KalaSearch]

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

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

[Chism]

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