封装Modal

概述

在父组件中显示 Modal 子组件用于编辑数据（新增、修改），本案例演示控制 Modal 显示隐藏以及传参的方法。案例文件结构如下：

1. 项目 “用户” 组件，用于显示用户列表，文件是 src/views/system/user/index.tsx
2. “用户” 组件中有使用了 Modal 的模态窗，用于新增、修改用户，文件是 src/views/system/user/CreateUser.tsx

本案例见项目 https://gitee.com/chanchaw/reat-manager 的分支 5d1c792fe8339b29a4f482c2520ea5f8688016ea

源码

子组件传参模型

文件 src/types/modal.ts 的全部源码

import { MutableRefObject } from 'react'
import { User } from './api'
// 定义操作类型：新增、修改、删除
export type IAction = 'create' | 'edit' | 'delete'
// 子组件接收父组件传递来的参数模型
export interface IModalProp {
  mRef: MutableRefObject<
    | {
        open: (type: IAction, data: User.userInfo) => void
      }
    | undefined
  >
  update: () => void
}

子组件反馈代码

子组件文件 src/views/system/user/CreateUser.tsx 的关键代码，本组件中包含 Modal 和 Form 组件

import { useImperativeHandle, useState } from 'react'
const CreateUser = (props: IModalProp) => {
  const [visible, setVisible] = useState(false)// 控制本子组件 Modal 显示的状态
  const [action, setAction] = useState<IAction>('create')// 表示当前是：新增、修改、删除
  // 子组件内函数，等待暴露给父组件使用
  const open = (type: IAction, data?: User.userInfo) => {
    setAction(type)
    setVisible(true)
  }
  // 暴露子组件的 open 方法
  useImperativeHandle(props.mRef, () => {
    return { open }
  })
}

父组件调用

const User = () => {
  const userRef = useRef<{
    open: (type: IAction, data?: UserType.userInfo) => void | undefined
  }>()
  
  // 打开 Modal 对话框
  // 参数 create 表示新增，不需要传第二个参数
  const handleCreate = () => {
    userRef.current?.open('create')
  }
  return (
  	<Form>
          <Button onClick={handleCreate}>新增</Button>
    </Form>
    <Table></Table>
    <CreateUser mRef={userRef} update={() => getUserList()} />
  )
}