reactjs-popup弹出菜单点击选项后无法关闭的问题求助

reactjs-popup的模态框模式下，通过{ close => (...content) }传递关闭函数的写法，在弹出菜单（modal={false}）场景下确实无法直接生效，因为两种模式的上下文传递逻辑不同。以下是两种可行的解决方案：

方案1：使用usePopup钩子获取关闭方法 #

通过库提供的usePopup钩子，可以在弹出菜单的子组件中直接获取close函数，无需手动传递：

import Popup from 'reactjs-popup';
import { usePopup } from 'reactjs-popup';

// 封装可关闭的菜单项组件
const CloseableMenuItem = ({ label, onClick }) => {
  const { close } = usePopup();
  const handleClick = () => {
    onClick?.();
    close();
  };
  return <button onClick={handleClick}>{label}</button>;
};

// 主组件使用示例
function App() {
  return (
    <Popup 
      trigger={<button>打开菜单</button>} 
      modal={false} 
      position="bottom center"
    >
      <div className="popup-menu">
        <CloseableMenuItem label="选项1" onClick={() => console.log("选中选项1")} />
        <CloseableMenuItem label="选项2" onClick={() => console.log("选中选项2")} />
        {/* 处理链接类型的菜单 */}
        <a 
          href="/some-path" 
          onClick={(e) => {
            const { close } = usePopup();
            close();
            // 若需要保留跳转逻辑，可在close后执行，或根据需求调整
            // e.preventDefault();
            // window.location.href = e.target.href;
          }}
        >
          跳转链接
        </a>
      </div>
    </Popup>
  );
}

方案2：通过onOpen回调缓存close函数 #

在Popup组件的onOpen回调中接收close函数，存入组件状态，之后在内部元素的点击事件中调用：

import { useState } from 'react';
import Popup from 'reactjs-popup';

function App() {
  const [closeMenu, setCloseMenu] = useState(null);

  return (
    <Popup 
      trigger={<button>打开菜单</button>} 
      modal={false} 
      position="bottom center"
      onOpen={(close) => setCloseMenu(close)}
      onClose={() => setCloseMenu(null)}
    >
      <div className="popup-menu">
        <button onClick={() => {
          console.log("选中选项1");
          closeMenu?.();
        }}>选项1</button>
        <button onClick={() => {
          console.log("选中选项2");
          closeMenu?.();
        }}>选项2</button>
        <a 
          href="/some-path" 
          onClick={(e) => {
            e.preventDefault();
            closeMenu?.();
            setTimeout(() => {
              window.location.href = e.target.href;
            }, 100);
          }}
        >
          跳转链接
        </a>
      </div>
    </Popup>
  );
}

注意事项 #

• 弹出菜单模式下，默认点击外部区域会自动关闭，但内部元素需要手动调用close方法
• 使用usePopup钩子时，组件必须是Popup的直接或间接子组件，否则无法获取上下文
• 处理链接元素时，若不需要跳转可阻止默认行为，若需要跳转建议先关闭菜单再执行跳转逻辑

内容的提问来源于stack exchange，提问作者AtaReversei