React Antd *Ref.current.contain() not function

原本是为了解决 antd popover气泡框 4.0以上版本点击外部关闭问题时 碰到了# ref.current.contains 不是 React 中的函数

zhuanlan.zhihu.com/p/364776062

我的解决办法是 绑定ref在 <Popover content=""></<Popover> content的jsx的div里面

const lockRef = useRef(false);
  const onMouseDown = () => {
    lockRef.current = true;
  };
  const onMouseUp = () => {
    lockRef.current = false;
  };
  useEffect(() => {
    // 解决antd 点击外部不关闭popover的问题
    const PopoverDown = ({ target }) => {
      // 传入的节点是否为该节点的后代节点
      if (!PopoverRef.current?.contains(target) && !lockRef.current) {
        handleFriendChange(false); // 关闭气泡框
        showRightHandle(false);
      }
    };
    if (friendModal) {
      document.addEventListener('mousedown', PopoverDown);
    }

    return () => {
      document.removeEventListener('mousedown', PopoverDown);
    };
  }, [friendModal]);
  
  <Popover
          className="friendPopover"
          overlayStyle={{ width: `${showRight}? '300px': '600px'` }}
          placement="rightTop"
          trigger="click"
          maskClosable="true"
          destroyTooltipOnHide
          getPopupContainer={() => document.body}
          visible={friendModal}
          content={(
             <div ref={PopoverRef} onMouseDown={onMouseDown} 
                 onMouseUp={onMouseUp} className={styles.maxBox}>
              <div />
          )}
        />