Question

我有一个封装在Slide组件中的菜单。代码是这样的：

 return(


    <Slide direction="down" in={showNavState} >
      <AppBar position="absolute" className={classes.bgColor} >
        <Toolbar>
              <Button className={classes.saveDataButton} color="inherit">SAVE MY DATA</Button>
              <Button color="inherit" onClick ={redirectToClientsList}>My Clients</Button> 
              <Button color="inherit" onClick ={redirectToCalendar}>Calendar</Button>

        </Toolbar>
      </AppBar>

    </Slide>

)

当用户首次将某些数据输入表单时，我正在使用indexDB来显示以上（导航）代码。当用户输入数据时，数据将存储到React中的useState实例。

用户添加数据---> useState更新为TRUE->显示导航代码

显示导航代码时，它会“向下滑动”（看起来很整洁），这正是我想要的。

当用户转到另一个页面时，它会在每次加载页面时继续“向下滑动”。我不要这个。

我想出的唯一解决方案是基于不同的useState值返回不带Slide的Nav代码。换句话说：

if(someState){

    return(

    // With Slide

    <Slide direction="down" in={showNavState} >
      <AppBar position="absolute" className={classes.bgColor} >
        <Toolbar>
              <Button className={classes.saveDataButton} color="inherit">SAVE MY DATA</Button>
              <Button color="inherit" onClick ={redirectToClientsList}>My Clients</Button> 
              <Button color="inherit" onClick ={redirectToCalendar}>Calendar</Button>

        </Toolbar>
      </AppBar>

    </Slide>

)


}else{

 return(

  // Without Slide

      <AppBar position="absolute" className={classes.bgColor} >
        <Toolbar>
              <Button className={classes.saveDataButton} color="inherit">SAVE MY DATA</Button>
              <Button color="inherit" onClick ={redirectToClientsList}>My Clients</Button> 
              <Button color="inherit" onClick ={redirectToCalendar}>Calendar</Button>

        </Toolbar>
      </AppBar>



)



}

问题：有没有办法静态显示Slide组件的内容而没有任何动画？这样，我就可以根据useState布尔值（或其他一些值）来设置值。

赞：

<Slide direction="none" in={showNavState} >
  // shows content statically
</Slide>

编辑：

我在下面的评论中为每个请求添加了一个codeandbox示例。

https://codesandbox.io/s/thirsty-bird-3f7ir

此外，我认为我可以使用Context实例来执行此操作，但似乎有点过头了。

Answer 1

如果要基于someState的值显示“幻灯片”，则有一种类似的方法：

render(){
  var appBar = (
    <AppBar position="absolute" className={classes.bgColor} >
      <Toolbar>
        <Button className={classes.saveDataButton} color="inherit">SAVE MY DATA</Button>
        <Button color="inherit" onClick ={redirectToClientsList}>My Clients</Button> 
        <Button color="inherit" onClick ={redirectToCalendar}>Calendar</Button>
      </Toolbar>
    </AppBar>
  )
  var withSlideBar = (
    <Slide direction="down" in={showNavState} >
      {appBar}    
    </Slide>
  )
  return (
    <div>{ someState ? withSlideBar : appBar }</div>
  )
}

材质UI幻灯片组件-如何根据组件状态禁用幻灯片效果

1 个答案: