React modal暴露ref简洁使用

• 父组件使用

import { useRef } from 'react'
import { FormModal } from './modal'const IndexRoute = () => {const formRef = useRef<any>()const openModal = (row?: any) => {const params = {title: row?.id ? `【${row.name}】编辑` : '创建',isView: false,row,api: row?.id ?  editXXX : createXXX,refreshList: () => proTableProps.actionRef.current?.reload()}formRef.current?.acceptParams(params)}return (<><Button onClick={openModal}>open modal</Button><FormModal ref={formRef} />others page content</>)
}export default IndexRoute

• 子组件

import { Icons } from '@/components/antd-icons'
import { Button, Form, Input, message, Modal, Upload } from 'antd'
import { forwardRef, useEffect, useImperativeHandle, useState } from 'react'export const FormModal = forwardRef((props: any, ref) => {const [form] = Form.useForm()const [confirmloading, setConfirmloading] = useState<boolean>(false)const [visible, setVisible] = useState(false)const [modalProps, setModalProps] = useState<any>({isView: false,title: '',row: {},api: () => {}})const { isView, title, row, api, refreshList } = modalPropsconst onCancel = () => {setConfirmloading(false)form.resetFields()setVisible(false)}const acceptParams = (params: any) => {setModalProps(params)setVisible(true)params.row ? form.setFieldsValue({ ...params.row }) : form.resetFields()}const onOk = async () => {form.validateFields().then(async formValue => {setConfirmloading(true)const res = await api({ ...formValue, id: row?.id })if (res) {message.success(`操作成功`)onCancel()refreshList()}setConfirmloading(false)})}useImperativeHandle(ref,() => ({acceptParams}),[])useEffect(() => {row && Object.keys(row)?.length > 0? form.setFieldsValue({ ...row }): form.resetFields()}, [row])const normFile = (e: { fileList: any }) => {if (Array.isArray(e)) {return e}return e && e.fileList}return (<ModalforceRendertitle={title}open={visible}onOk={onOk}onCancel={onCancel}confirmLoading={confirmloading}destroyOnClose={true}><Formform={form}disabled={isView}initialValues={row}layout="horizontal"labelCol={{ span: 4 }}size="small"><Form.Itemlabel="名称"name="name"rules={[{ required: true, message: '请输入版本名称!' }]}><Input placeholder="name" /></Form.Item>{/* 文件上传form包裹demo */}<Form.Itemname="calibration_zip"label="附件"valuePropName="fileList"getValueFromEvent={normFile}><Upload maxCount={1} beforeUpload={() => false}><Button size="small" icon={<Icons.UploadOutlined />}>上传</Button></Upload></Form.Item></Form></Modal>)
})