在 React 项目开发中，Toast、Confirm、Notification、Drawer 等弹层组件往往是可选的——只有在业务真正需要时才会渲染。传统做法要么在每个页面手动控制状态，要么直接引入大型 UI 库的 Modal.confirm这会导致：

• 不必要的体积膨胀引入整个库只为几个弹窗功能。
• 代码耦合度高业务逻辑和 UI 实现混在一起，难以复用。
• 维护成本上升每次新增或修改弹层都要改动多个文件。

React‑Call 正是为了解决这些痛点而生。它让我们像调用普通异步函数一样调用 UI 组件，既保持了按需渲染又避免了沉重依赖。

创建 Confirm 组件

import { createCallable } from 'react-call';interface Props {
message: string;话说回来，}
type Response = boolean;export const Confirm = createCallable => (



{message}

 call.end}
className="rounded-md border border- px-4 py-2 text-sm font-medium text- transition-colors hover:text-">
取消

 call.end}
className="rounded-md bg- px-4 py-2 text-sm font-medium text- transition-colors hover:bg-">
继续




));Confirm.displayName = 'Confirm';

将组件注入到根节点

import { Confirm } from './Confirm';import { DeleteButton } from './DeleteButton';说起来，export default function App {
return (
<>
{/* 必须放在根节点。这样内部会自动管理挂载/卸载 */}


);
}

在项目任意位置使用 Confirm 组件

import { useState } from 'react';import { Confirm } from './Confirm';export const DeleteButton = => {
const = useState<'idle' | 'deleted' | 'cancelled'>;const handleClick = async => {
// ✅ 像调用普通 async 函数一样等待使用者确认
const accepted = await Confirm.call({
message: '确定要删除这条数据？',})，不过，setStatus;}，return (


删除


{status === 'idle' && '→ awaiting click…'}
{status === 'deleted' && (
→ deleted
)}
{status === 'cancelled' && '→ cancelled'}


);}，怎么说呢，

主要优势回顾：

• 按需渲染 + 异步调用：通过 .call 获得 Promise。天然支持 await，
• 零侵入式集成：只需在根节点挂载一次即可在任意位置使用。
• 轻量化：不再需要整个 UI 库，只依赖 TailwindCSS 或原生 CSS。

有了 React‑Call。你可以像使用浏览器原生 alert/confirm/prompt 那样，在保持 UI 可定制化的前提下实现干净、可复用的弹层交互。