Skip to content

Modal 模态框 ​

提供声明式挂载与静态方法两种打开模态框的方式。

交互演示 React

亲手试一试,更容易理解。

在当前页面运行 Modal 模态框 的交互示例。

交互指南 ​

  1. 点击 show model 打开挂载式弹窗。
  2. 输入内容,点击确定、取消或关闭。
  3. 点击静态方式调用,比较 Modal.show 与 Modal.hidden。

在项目中运行 ​

点击本页的“运行演示”,或在独立窗口中体验示例。也可在 src 下的页面中直接挂载现有演示:

tsx
import Example from "./components/modal/ModalDemo";

export default function ExamplePage() {
  return <Example />;
}

API 与实现要点 ​

名称类型或形式说明
visibleboolean声明式显示状态
title / width标题 / number弹窗标题与宽度
onOk / onCancel / onClosefunction按钮与关闭回调
Modal.show / Modal.hidden静态方法打开与关闭静态弹窗

使用边界 ​

静态调用需在回调中主动调用 Modal.hidden。挂载式需要更新 visible。示例的确认操作只关闭弹窗并打印日志。

源码位置 ​

  • 演示入口:src/components/modal/ModalDemo.tsx
  • 相关实现:src/components/modal

在实践中理解 React,在分享中共同成长。