Openify

主题

快速开始 ​

安装 ​

sh
$ npm add openify
sh
$ yarn add openify
sh
$ pnpm add openify

openify对应弹窗 ​

tsx
type OpenableModalProps = OpenParams<void> &
    Omit<ModalProps, "open" | "onOk" | "onCancel" | "afterClose">;

const openableModal = openify<OpenableModalProps>(
    ({ open, onClose, onUnmount, ...restProps }) => (
        <Modal
            open={open}
            onOk={onClose}
            onCancel={onClose}
            afterClose={onUnmount}
            {...restProps}
        />
    ),
);

准备一个插槽 ​

tsx
const Layout = ({ children }: PropsWithChildren) => (
    <>
        {children}
        <Slot id="root" />
    </>
);

这样就可以在任意位置使用你的弹窗了 ​

tsx
export default () => (
    <Layout>
        <Button
            onClick={() => {
                Slot.getById("root").open(openableModal, {
                    title: "欢迎使用Openify",
                    okText: "确定",
                    cancelText: "取消",
                });
            }}
        >
            打开弹窗
        </Button>
    </Layout>
);

效果示意 ​

提示

你可以通过onClose的第一个参数来弹窗关闭时附带的信息传递给open的调用处

注意

不要忘了实现onUnmount函数,虽然表现上不会有明显的差异,但是弹窗组件会一直无法释放,造成内存泄漏