React 和 Material UI：显示和隐藏组件 onClick

Question

我试图在单击 Button 时打开 Material UI Box 组件，并在再次单击 Button 时关闭 Box。我试图从谷歌搜索解决方案，但真的找不到任何简单的东西。我需要非常基本的解决方案。我没有任何我尝试过的解决方案，因为我只是想知道如何做到这一点。

我假设我需要这些处理程序和其中的一些代码：

const [show, setShow] = useState(null);

const handleOpen = event => {
    setOpen(event.currentTarget);
};

const handleClose = () => {
    setOpen(null);
};

这是应该打开和关闭 Box 组件的 Button 组件。在那里我需要两个功能。当我单击按钮时，它设置 Box !null 如果它是 null 和 null 如果它是 !null：

<Button 
    className={classes.button}
    onClick={handleOpen}
>
    Click
</Button>
<Box className={classes.box}>
    // Some content
</Box>

Answer 1

您需要使用状态来显示/隐藏您的组件。您可以像这样处理非常简单的事情（使用 Hooks）

import React, { useState } from 'react';

const Component = () => {
  const [show, setShow] = useState(false);
  return(
    <>
      <button onClick={() => setShow(prev => !prev)}>Click</button>
      {show && <Box>This is your component</Box>}
    </>
  );
}

export default Component