Areact-call:弹框还能 await

react-call:弹框还能 await

AsyncTalk·2026 年 7 月 3 日·5 分钟
在喜马拉雅播放
创作者写的节目说明

有没有遇到过这种场景:一个删除按钮,点下去得先弹个「确认删除吗?」,用户点确定才真的删。


浏览器自带的 window.confirm 是能用,但又丑、又几乎不能定制——位置、颜色、甚至标题都改不了。于是你只好自己写组件、用 React Portal 挂载、再手动管理 DOM 的显隐和生命周期,挺折腾的。


这期聊聊 react-call 这个小而美的库。核心思路一句话:把你自定义的 React 组件变成「可以 await 的函数」。用 createCallable 包一层,就能在调用方直接 await xxx.call(...),像调用异步函数一样拿到用户的操作结果。


视频里会过一遍:
· 从 window.confirm 的痛点切入,为什么手写 Portal 很烦
· createCallable 的基本用法(call / Title / action 几个字段)
· 用 bottom sheet 写的实战例子
· 支持同时弹出多个实例(比如一连串 Toast)
· 和 react-query mutation 的配合:接口失败时弹框依然保留
· 自带 skills,对 AI 编程也很友好


你平时都怎么处理这类弹框、或者异步交互逻辑?评论区聊聊~


#React #前端开发 #TypeScript #Web开发 #编程 #react-call #asynctalk

AsyncTalk · 更多单集

看全部 82 期 →

AsyncTalk

Areact-call:弹框还能 await

AsyncTalk · 7 月 3 日 · 5 分钟

react-call:弹框还能 await

在喜马拉雅播放
创作者写的节目说明

有没有遇到过这种场景:一个删除按钮,点下去得先弹个「确认删除吗?」,用户点确定才真的删。


浏览器自带的 window.confirm 是能用,但又丑、又几乎不能定制——位置、颜色、甚至标题都改不了。于是你只好自己写组件、用 React Portal 挂载、再手动管理 DOM 的显隐和生命周期,挺折腾的。


这期聊聊 react-call 这个小而美的库。核心思路一句话:把你自定义的 React 组件变成「可以 await 的函数」。用 createCallable 包一层,就能在调用方直接 await xxx.call(...),像调用异步函数一样拿到用户的操作结果。


视频里会过一遍:
· 从 window.confirm 的痛点切入,为什么手写 Portal 很烦
· createCallable 的基本用法(call / Title / action 几个字段)
· 用 bottom sheet 写的实战例子
· 支持同时弹出多个实例(比如一连串 Toast)
· 和 react-query mutation 的配合:接口失败时弹框依然保留
· 自带 skills,对 AI 编程也很友好


你平时都怎么处理这类弹框、或者异步交互逻辑?评论区聊聊~


#React #前端开发 #TypeScript #Web开发 #编程 #react-call #asynctalk

AAsyncTalk

AsyncTalk

面向开发者的技术播客,聚焦 AI 与软件工程交叉领域,围绕具体产品、开源项目与技术事件做一手实践分享与原理拆解。

已收录 82 期 · 最近更新 11 月 2 日

在哪里听

http://www.ximalaya.com/album/53875103.xml复制

内容版权归创作者,声湃按创作者开放的 RSS 收录。了解收录与 RSS →

更多单集 全部 82 期 →

A

Haiku 5.5:AI抢饭碗加速

10 月 26 日 · 6 分钟

A

MCP 0728:让 MCP 再次伟大

10 月 16 日 · 12 分钟