在 2 个不同的菜单之间切换（Reactjs + Material UI）答案

【问题标题】：Toggle between 2 different menus (Reactjs + Material UI)在 2 个不同的菜单之间切换（Reactjs + Material UI）
【发布时间】：2020-07-13 18:33:34
【问题描述】：

我已经创建了一个超级菜单，并且我已经添加了切换器，想法很简单，如果开关关闭，则显示第一个菜单，如果开关打开则显示第二个菜单。

目前，当打开时，它会显示第二个菜单，但当它关闭时，它什么也不显示，只有背景，有人可以帮我解决这个问题，可能有人已经遇到问题了。

【问题讨论】：

这只是根据条件进行动态渲染的问题。将一些布尔值存储为状态，如果开关打开则为真，如果关闭则为假，然后根据该布尔状态呈现正确的菜单。如果您想要更详细的答案，您应该发布您的代码。

标签： javascript reactjs material-ui

【解决方案1】：

只需添加一个条件

例子：

export default function ComponentWithBackgroud(){
 const [toggleOn, setToggleOn] = useState(false);

 return <section class="menuContainer">
    <input type="checkbox" onChange={()=>setToggleOn(!toggleOn)}>
    {toggleOn ? <Firstmenu /> : <SecondMenu />}
</section>
}

【讨论】：

非常感谢您的帮助