使用外部 function 有条件地渲染组件

Question

I'm working on a modal function in an application. Since the app has different modals, I have a function which handles the open & close state of various windows:

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

Now in my main component, I want to to use this function with another component:

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

This works fine, except that instead of having the {hide} function as a part of the imported component, I want to toggle the view in <Button onClick={show}>icon</Button>

My idea is to conditionally render the show or hide in the button instead of rendering it in the component, but I'm not quite sure how to do that since I haven't used an outside function to control a function in a component.

Answer 1

Simply write a function that toggles the state rather than sets it to a value.

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

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