🤔 使用 React Hook 实现 Modal 组件 API 调用两种方式

前言

紧接上篇文章 用 React Hook + ChakraUI 实现一个丝滑菜单组件，这篇文章来为大家介绍如何使用 React Hook 实现 Modal 组件 API 调用方式。

实现过程

Modal 组件封装

这里我使用的是 ChakraUI 提供的组件进行封装，实现的代码如下：

// Modal/index.tsx
import {
  Modal as ChakraModal,
  ModalOverlay,
  ModalContent,
  ModalFooter,
  ModalHeader,
  Box,
  Alert,
  AlertIcon,
  AlertDescription,
  Flex,
  ModalCloseButton,
  Button,
} from "@chakra-ui/react";
import { motion } from "framer-motion";

import ModalBody from "./ModalBody";
import { ModalProps } from "./types";
import StatusIcon from "./StatusIcon";

const Modal: React.FC<ModalProps> = ({
  isOpen,
  title = "",
  okText = "OK",
  status,
  cancelText = "Cancel",
  onClose,
  onOk,
  isLoading = false,
  showAlert = false,
  alertText = "",
  scrollBehavior = "inside",
  showCloseIcon = true,
  showCancel = true,
  okButtonProps = {},
  cancelButtonProps = {},
  alertProps = {},
  children,
  ...rest
}) => {
  return (
    <ChakraModal
      size="xl"
      isOpen={isOpen}
      onClose={onClose}
      closeOnOverlayClick
      isCentered
      scrollBehavior={scrollBehavior}
      trapFocus={false}
      {...rest}
    >
      <ModalOverlay backdropFilter="blur(5px)" />
      <ModalContent width="588px" borderRadius="4px" position="relative">
        <Flex align="center" justify="space-between" p="16px">
          <ModalHeader
            color="gray.700"
            fontWeight="medium"
            fontSize="lg"
            flex="1"
            p="0"
            display="flex"
            alignItems="center"
          >
            {status && <StatusIcon status={status} mr="3" />}

            {title}
          </ModalHeader>

          {showCloseIcon && (
            <ModalCloseButton
              className="chakra-modal__close-btn"
              onClick={onClose}
            />
          )}
        </Flex>

        {showAlert && (
          <motion.div
            animate={{ scale: [0, 1], y: 0 }}
            transition={{ duration: 0.3 }}
          >
            <Box>
              <Alert status="error" {...alertProps}>
                <AlertIcon boxSize="20px" />
                <AlertDescription color="gray.700">
                  {alertText}
                </AlertDescription>
              </Alert>
            </Box>
          </motion.div>
        )}
        <ModalBody scrollBehavior={scrollBehavior}>{children}</ModalBody>

        <ModalFooter h="73px">
          {showCancel && (
            <Button onClick={onClose} size="md" {...cancelButtonProps}>
              {cancelText}
            </Button>
          )}
          {onOk && (
            <Button
              ml="12px"
              onClick={onOk}
              size="md"
              isLoading={isLoading}
              colorScheme="purple"
              {...okButtonProps}
            >
              {okText}
            </Button>
          )}
        </ModalFooter>
      </ModalContent>
    </ChakraModal>
  );
};

export { default as useModal } from "./useModal";

export default Modal;

基本上就是将 ChakraUI 的多个 Modal 关联组件组合在一起，并根据需求补充了一些 props。

在上面的代码中引入了一个 ModalBody 组件，在这个组件中我实现了一个超出视图范围显示滚动提示的功能，下面直接放上实现的代码：

// Modal/ModalBody.tsx

import React, { useState, useRef, useMemo, SyntheticEvent } from "react";

import { Box, Icon, ModalBody as ChakraModalBody } from "@chakra-ui/react";
import { useSize, useThrottleFn } from "ahooks";
import { AnimatePresence, motion } from "framer-motion";
import { BiChevronDown } from "react-icons/bi";

const SCROLL_TIP_HEIGHT = 32;
const SCROLL_TIP_BOTTOM = 72;

const ModalBody: React.FC<{
  children: React.ReactNode;
  scrollBehavior?: "outside" | "inside";
}> = ({ children, scrollBehavior = "inside" }) => {
  const [scrollTop, setScrollTop] = useState(0);
  const [showScrollTip, setShowScrollTip] = useState(true);
  const contentRef = useRef(null);
  const contentSize = useSize(contentRef);

  const bodyRef = useRef(null);
  const bodySize = useSize(bodyRef);

  // Determine if the current container is scrollable
  const isScroll = useMemo(() => {
    if (
      contentSize?.height &&
      bodySize?.height &&
      contentSize.height > bodySize.height + 20
    ) {
      return true;
    }
    return false;
  }, [contentSize?.height, bodySize?.height]);

  const { run: handleScroll } = useThrottleFn(
    (e: SyntheticEvent<HTMLDivElement>) => {
      const {
        scrollHeight,
        scrollTop: currentScrollTop,
        offsetHeight,
      } = e.target as HTMLDivElement;
      if (isScroll) {
        // Triggered when scrolling to SCROLL_TIP_HEIGHT from the bottom
        if (
          scrollHeight - currentScrollTop - offsetHeight <=
          SCROLL_TIP_HEIGHT
        ) {
          setShowScrollTip(false);
          // Triggered when scrolling up
        } else if (currentScrollTop < scrollTop) {
          setShowScrollTip(true);
        }
      }
      setScrollTop(currentScrollTop);
    },
    { wait: 200, leading: true }
  );

  return (
    <>
      <ChakraModalBody
        maxHeight={scrollBehavior === "inside" ? "596px" : "auto"}
        p="24px"
        ref={bodyRef}
        onScroll={handleScroll}
      >
        <Box ref={contentRef}>{children}</Box>
      </ChakraModalBody>
      <AnimatePresence>
        {isScroll && showScrollTip && (
          <>
            <motion.div
              style={{
                display: "flex",
                justifyContent: "center",
                alignItems: "center",
                position: "absolute",
                bottom: SCROLL_TIP_BOTTOM,
                left: "0",
                backgroundImage:
                  "linear-gradient(to bottom, rgba(255,255,255,0.6), rgba(255,255,255,1))",
                width: "100%",
              }}
              initial={{ opacity: 0, y: 10 }}
              animate={{ opacity: 1, y: 0 }}
              exit={{ opacity: 0, y: 10 }}
              transition={{ duration: 0.2 }}
            >
              <Icon
                as={BiChevronDown}
                width={`${SCROLL_TIP_HEIGHT}px`}
                height={`${SCROLL_TIP_HEIGHT}px`}
                color="gray.500"
                fontWeight="200"
              />
            </motion.div>
          </>
        )}
      </AnimatePresence>
    </>
  );
};
export default ModalBody;

具体代码的解析和实现的过程可以看我的这篇文章： 🤔提升用户体验，给你的模态弹窗加个小细节

在使用组件时，我们需要维护 isOpen 的状态，手动控制 Modal 组件的打开和关闭。

const {
    isOpen: normalIsOpen,
    onClose: onNormalClose,
    onOpen: onNormalOpen,
  } = useDisclosure();
  
<Button onClick={onNormalOpen}>Open Modal</Button>
<Modal
    title="Normal Modal"
    isOpen={normalOpen}
    onClose={onNormalClose}
    onOk={() => {
      console.log("onOk");
    }}
    >
    {faker.lorem.paragraphs(10)}
</Modal>

实现的效果如下：

上面的这种 Modal 组件封装是比较常用的一种方式，基本可以 cover 大部分场景。但是不知道大家是否遇到过这种场景：

图中的四个红框点击后都会弹出 Modal ，在实现页面时我们就需要维护四份 Modal 状态：

const {
    isOpen: aIsOpen,
    onClose: onAClose,
    onOpen: onAIOpen,
  } = useDisclosure();
  
  const {
    isOpen: bIsOpen,
    onClose: onBClose,
    onOpen: onBOpen,
  } = useDisclosure();
  
const {
    isOpen: cIsOpen,
    onClose: onCClose,
    onOpen: onCOpen,
  } = useDisclosure();
  
  const {
    isOpen: dIsOpen,
    onClose: onDClose,
    onOpen: onDOpen,
  } = useDisclosure();
  
<Modal isOpen={aIsOpen}>A Modal</Modal>
<Modal isOpen={bIsOpen}>B Modal</Modal>
<Modal isOpen={cIsOpen}>C Modal</Modal>
<Modal isOpen={dIsOpen}>D Modal</Modal>

而除去一些包含复杂表单的 Modal，其他的 Modal 基本都具有相似的逻辑，且整体的样式也比较简单，例如下图这种确认 Modal：

其实很多组件库中的 Modal 组件都是带有 API 调用的方式的，通过 API 来弹出一些简单的 Modal ，在实现功能时代码量更少，而且使用起来也会更加方便，例如下面这种调用方式：

showModal({
  title: "Modal with Alert",
  children: "Simple content",
  okText: "OK",
  onOk: () => {
    console.log("onOk")
  },
})

那么下面我们将以此为目标，在原有 Modal 组件的基础上，补充一个通过 API 弹出组件的方式。

API 实现

第一步我们要梳理下思路，要想不在页面中引入组件并挂载，那么我们就需要在调用方法时自动将组件挂载到页面上。其次是我们不需要自己去维护 Modal 的打开状态，那就需要将状态单独维护在一个地方，因此需求就是以下两点：

1. 自动挂载组件
2. 无需维护状态

实现自动挂载组件

我们先来实现第一点，要实现自动组件挂载，我们就需要在调用函数时执行 react 中相关的渲染方法，这里我是将 showModal 方法写在 useModal 这个 hook 中。当执行 hook 时就将 Modal 挂载到页面上, 实现代码如下

const useModal = () => {
  const root = useRef<Root>();

  useEffect(() => {
    const modalDom = document.createElement("div");
    document.body.appendChild(modalDom);
    modalDom.id = "modal-portal";

    if (!root.current) {
      root.current = createRoot(modalDom);
    }

    return () => {
      root.current?.unmount();
      document.removeChild(modalDom);
    };
  }, []);

  useEffect(() => {
    const modalDom = document.getElementById("modal-portal");
    if (root.current && modalDom) {
      root.current.render(
        <ChakraProvider>
          <Modal
            isOpen
          />
        </ChakraProvider>
      );
    }
  }, [root.current]);
};

export default useModal;

在上面的代码中，第一个 useEffect 函数用于创建 Modal 的根元素，并在组件卸载时移除该元素。createRoot 是用于在根节点上渲染 React 组件的 API。在这里，它创建了一个新的根元素 modalDom，并将其附加到 document.body 上。

第二个 useEffect 函数则用于在模态框的 props 变化时更新模态框。当 root.current 和 modalDom都存在时，root.current.render 会将 <Modal> 组件渲染到 modalDom 根元素中。

这样当我们在组件中调用 useModal hook 时就会将 <Modal> 组件自动挂载到页面中了，且组件卸载时也会将 Modal 移除。

维护 Modal 状态

接下来我们在 useModal 补充一下 Modal 的状态，实现代码如下：

import { useEffect, useRef, useState } from "react";
import Modal from "./index";
import { ChakraProvider, useBoolean, useDisclosure } from "@chakra-ui/react";
import { Root, createRoot } from "react-dom/client";
import { ModalProps } from "./types";

type UseModalProps = Omit<
  ModalProps,
  "isOpen" | "onClose" | "onOpen" | "isLoading" | "onOk"
> & {
  onOk?: () => Promise<void> | void;
};

const useModal = () => {
  const root = useRef<Root>();
  const [modalProps, setModalProps] = useState<UseModalProps>({
    title: "",
    children: null,
  });

  const onOk = useRef<() => void>();
  const { isOpen, onOpen, onClose } = useDisclosure();
  const [isLoading, { on: showLoading, off: hideLoading }] = useBoolean();

  useEffect(() => {
    const modalDom = document.createElement("div");
    document.body.appendChild(modalDom);
    modalDom.id = "modal-portal";

    if (!root.current) {
      root.current = createRoot(modalDom);
    }

    return () => {
      root.current?.unmount();
      document.removeChild(modalDom);
    };
  }, []);

  useEffect(() => {
    const modalDom = document.getElementById("modal-portal");
    if (root.current && modalDom) {
      root.current.render(
        <ChakraProvider>
          <Modal
            {...modalProps}
            isOpen={isOpen}
            onClose={onClose}
            onOk={onOk.current}
            okButtonProps={{
              isLoading,
            }}
          />
        </ChakraProvider>
      );
    }
  }, [root.current, modalProps, isOpen, onClose, onOk, isLoading]);

export default useModal;

基于前面自动挂载 Modal 的基础上，我增加了 onClose, onOk, isOpen, isLoading 等状态，并且通过这个工具类型 Omit 将原本需要传入的 props 给忽略了，避免使用 Hook 时重复传入导致错误。

实现 showModal

最后我们再补充上最关键的 showModal 方法：

  const showModal = (props: UseModalProps) => {
    onOpen();
    setModalProps(props);

    if (props.onOk) {
      onOk.current = async () => {
        showLoading();
        if (
          typeof props.onOk === "function" &&
          props.onOk.constructor.name === "AsyncFunction"
        ) {
          await props.onOk();
        } else {
          props.onOk?.();
        }
        hideLoading();
        onClose();
      };

      onClose();
    }
  };

showModal 函数是用于显示 Modal 的函数。它接收一个UseModalProps 类型的参数，将 isOpen 和modalProps 的状态设置为 true 和传入的参数。

在 onOk 回调函数中，通过 showLoading() 函数显示加载动画，然后执行 onOk 属性指定的回调函数。如果回调函数是一个异步函数，则使用 await 关键字等待函数返回，否则直接调用回调函数。最后，通过 hideLoading() 隐藏加载动画，并将 isOpen 状态设置为 false。

hook 的使用方式：

const showModal = useModal();

<Button
  onClick={() =>
    showModal({
      title: "Modal with Alert",
      children: "Simple content",
      okText: "OK",
      onOk: async () => {
        return new Promise((res) => {
          setTimeout(() => {
            showToast({
              title: "onOK",
              status: "success",
              position: "top-right",
            });
            res();
          }, 2000);
        });
      },
    })
  }
>
  Open Modal with async API
</Button>

实现效果：

调用 showModal 时，我们直接将组件的 props 传入函数，比较特别的是 onOk 函数，它可以是一个异步函数，当它是异步函数时，Modal 组件会自动修改 loading 状态。

改造 showModal 为异步函数

当然，这只是实现方法之一，不知道大家是否有用过小程序的 showModal 函数，它的实现方式是将 showModal 作为一个异步函数，返回一个 Promise 值:

wx.showModal({
  title: '提示',
  content: '这是一个模态弹窗',
}).then((res)=>{
    if (res.confirm) {
      console.log('用户点击确定')
    } else if (res.cancel) {
      console.log('用户点击取消')
    }
})

使用这种方式，用户不需要传入 onOK 函数了，而是在点击 Modal 的确定或取消后，自己在 .then 中做处理，我们要做的就是将用户点击的结果在 Promise 中返回。

如果我们也想实现这种效果该怎么做呢，直接上代码：

type UseModalProps = Omit<
  ModalProps,
  "isOpen" | "onClose" | "onOpen" | "isLoading" | "onOk"
>;

const useModal = () => {
  const onOk = useRef<() => void>();
  const onCancel = useRef<() => void>();
  const { isOpen, onOpen, onClose } = useDisclosure();
  const [isLoading, { on: showLoading, off: hideLoading }] = useBoolean();

  const showModal: (props: UseModalProps) => Promise<{
    showLoading: () => void;
    hideLoading: () => void;
    onClose: () => void;
  }> = (props) => {
    onOpen();
    setModalProps(props);

    return new Promise((resolve, reject) => {
      onOk.current = () => {
        resolve({
          showLoading,
          hideLoading,
          onClose,
        });
      };

      onCancel.current = () => {
        reject();
        onClose();
      };
    });
  };

  return showModal;
};

export default useModal;

在上面的代码中，我将 showModal 改造为一个异步函数，调用时会先将 Modal 打开并传入 props，接下来返回一个 Promise， 在 Promise 的回调函数中，我们为 onOK 和 onCancel 赋值 resovle 和 reject ，只有在用户点击 OK 或是 Cancel 时这个异步函数才会执行结束。

这里我还为 resovle 传入了 showLoading, hideLoading, onClose 三个函数，方便我们在使用 showModal 时实现一些异步操作。

有一个注意点是之所以使用 useRef 存储函数，是因为使用 useState 存储函数比较麻烦，还有些坑，这里不展开讲。

改造后的 showModal 使用方式如下：

<Button
  onClick={() =>
    showModal({
      title: "Modal with Alert",
      children: "Simple content",
      okText: "OK",
    })
      .then(({ showLoading, hideLoading, onClose }) => {
        showLoading();
        setTimeout(() => {
          showToast({
            title: "onOK",
            status: "success",
            position: "top-right",
          });
          hideLoading();
          onClose();
        }, 2000);
      })
      .catch(() => {
        console.log("onClose");
      })
  }
>
  Open Modal with async API
</Button>

当然了，如果你不想在 catch 处理关闭逻辑，你也可以都在 .then 里处理，只需要在 resolve 时判断下事件类型，传入不同参数即可。最终实现效果：

总结

两种使用方式可以根据使用习惯或是实际业务进行选择，使用起来都挺方便的。组件系列在后续还会接着出，欢迎关注。如果觉得文章对你有帮助的话，除了收藏外还可以为我点个赞 👍，respect！

本文正在参加「金石计划」