如何在 React 中创建可重复使用的弹出框

Question

我被困在这里了，我很有可能把这一切都搞错了。 我正在尝试使用一系列弹出框创建一个选项菜单。 基本上，用户单击该框，会弹出某种对话框，他们要么输入某些内容，要么根据相关选项选择某些内容。

我有用于单击和显示分离到另一个组件ClickablePopup的弹出窗口的逻辑，这允许我不重复打开和关闭弹出窗口的逻辑。 但我真的不确定如何根据来自children的信号关闭弹出窗口，我打算能够包含几种不同类型的输入。

我一直在尝试使用的 ClickablePopup 组件：

const ClickablePopup = ({ children, label }) => {
  const [openPopup, setOpenPopup] = useState(false);

  const togglePopup = () => {
    setOpenPopup(!openPopup);
  };

  const ref = useDetectClickOutside({
    onTriggered: () => {
      if (openPopup) {
        setOpenPopup(false);
      }
    }
  });

  return (
    <div ref={ref}>
      {openPopup ? (
        <>{children}</>
      ) : (
        <div className="badge" onClick={() => togglePopup()}>
          {label}
        </div>
      )}
    </div>
  );
};

这是我到目前为止所拥有的代码框： https://codesandbox.io/s/cra-g8215s?file=/App.js

如前所述，我很困惑，因为我只是想不出如何让内部“包装”组件向其包装器发送信号。

Answer 1

您可以将 togglePopup 添加到子引用并在父引用中使用它

https://pl.reactjs.org/docs/hooks-reference.html#useimperativehandle