Openify 2.0 - React中使用弹窗的新方式Openify2.0 创新性地通过嵌入式Slot机制，在保留Re

背景

众所周知，React是一套声明式UI框架，这种方式在日常开发中确实给我们带来了不少的方便，然而在调用弹窗等类似全局组件的时候，我们其实更适合使用经典的命令式调用方式，这样更符合我们日常的开发习惯。Openify 1.0 探索了一套静态式打开的方案，然而这种方案存在一些难以回避的问题，比如静态调用时会需要新开一个渲染树，这样一方面会不得不依赖React Dom的api来走渲染，另一方面也会导致新开的渲染树无法直接使用React的上下文，需要用些取巧的手段来额外传递相关信息。Openify 2.0 采用了全新的实现方式，通过Slot机制规避了上述问题。(不过在使用上就需要额外先渲染Slot才能正常使用)

使用

openify 一下你的弹窗

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}
        />
    ),
);

准备一个Slot

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

然后你就可以在任意位置调用你的弹窗了

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

除此之位，openify2.0 还在1.0Promise化的能力上新增了主动取消的能力，也优化了应用与弹窗的渲染隔离和弹窗自身的异常捕获，更多可以参考主页或Github