1、点击框外隐藏弹窗hook

**描述：**有一个需要自己封装弹窗的组件，实现点击弹窗框外时隐藏弹窗
代码：
import { useEffect } from “react”;

// 点击框外hooks
import { useEffect } from "react";

 const useClickOutOfBox = (ref: any, callback: Function) => {
  const handleClick = (event: MouseEvent) => {
    if (ref && ref.current && !ref.current.contains(event.target)) {
      callback(); // 在callBack中放隐藏弹窗的逻辑
    }
  };

  useEffect(() => {
    document.addEventListener("click", handleClick);
    return () => {
      document.removeEventListener("click", handleClick);
    };
  });
};

export default useClickOutOfBox;

// 使用
import { useState, useEffect } from "react";
import { useClickOutOfBox } from "@/hooks/useClickOutOfBox";
... 
const [visible, setVisible] = useState(false);
const myRef = useRef(null);
myRef  && useClickOutOfBox(myRef, setVisible(false));
return (
...
{visible &&
<div ref={myRef}>
弹窗
</div>
...)
...