使用外部函数有条件地渲染组件

Question

我正在研究应用程序中的模态函数。由于该应用程序具有不同的模态，因此我具有处理各种窗口的打开和关闭状态的功能：

OpenItem.jsx

const OpenItem = ({ toggle, content }) => {
  const [isShown, setIsShown] = useState(false);
  const hide = () => setIsShown(false);
  const show = () => setIsShown(true);

  return (
    <>
      {toggle(show)}
      {isShown && content(hide)}
    </>
  );
};
export default OpenItem;

Header.jsx

现在在我的主要组件中，我想将此功能与另一个组件一起使用：

const Header = () => {
  return (
    <div>
      <OpenItem
        toggle={(show) => <Button onClick={show}>icon</Button>}
        content={(hide) => (
          // Component to hide:
          <ComponentToShowOrHide onClick={hide} />
        )}
      />
    </div>
  );
};
export default Header;

这很好用，除了我不想将{hide}函数作为导入组件的一部分，而是要切换<Button onClick={show}>icon</Button>中的视图

我的想法是有条件地渲染显示或隐藏在按钮中，而不是在组件中渲染它，但是我不确定该怎么做，因为我没有使用外部函数来控制按钮中的函数。组件。

Answer 1

只需编写一个可切换状态而不是将其设置为值的函数。

const OpenItem = ({ toggle, content }) => {
  const [isShown, setIsShown] = useState(false);

  return (
    <>
      {toggle(() => setIsShown(prevState => !prevState))}
    </>
  );
};
export default OpenItem;