antd-modal-hook
适用于ant design
的modal hook
,更简单、通用的调用弹框组件
import React from 'react';
import { Modal } from 'antd';
import { ModalProps } from 'antd-modal-hook';
const Uploader: FC<ModalProps> = ({ visible, onOk, onCancel }) => {
return (
<Modal
visible={visible}
title='Report'
onOk={() => {
// submit form or something else
onOk?.();
}}
onCancel={onCancel}
>
...
</Modal>
);
};
export default Uploader;
const [basicEditorProps, setBasicEditorVisible, setBasicEditorData] = useModalProps({
onOk() {
refetch();
},
});
...
<UploaderModal {...basicEditorProps} />
const [UploaderModal, setUploaderVisible, setUploaderData] = useModal(
Uploader,
{
onOk() {
refetch();
},
}
);
...
<UploaderModal />
增加并建议使用useModalProps
,不建议使用useModal
,有性能问题。使用方法略微修改。