可以使用 Ref 和 useEffect 来解决此问题。首先，在组件的外层包裹一个 div，并使用 useRef 来获取这个 div 的 Ref。然后，使用 useEffect 监听这个 Ref 的点击事件，并在触发事件时调用 setDropdownVisible(false) 方法来将下拉菜单隐藏起来。

示例代码如下：

import React, { useState, useRef, useEffect } from 'react';
import { Dropdown, Button, Menu } from 'antd';

const DropdownMenu = () => {
  const [dropdownVisible, setDropdownVisible] = useState(false);
  const dropdownRef = useRef(null);

  useEffect(() => {
    document.addEventListener('click', handleDocumentClick);
    return () => {
      document.removeEventListener('click', handleDocumentClick);
    };
  }, []);

  const handleDocumentClick = (event) => {
    if (!dropdownRef.current.contains(event.target)) {
      setDropdownVisible(false);
    }
  };

  const menu = (
    
      Option 1
      Option 2
      Option 3
    
  );

  return (
    

       setDropdownVisible(visible)}
      >
        Dropdown Button
      
    
  );
};

export default DropdownMenu;