html - React 中两个类之间的转换 - React 路由问题

Question

我正在尝试在子菜单中做一个非常简单的 React 幻灯片，但我不明白为什么它不起作用。我正在通过设置状态来切换类。

<div id="sideNavBar" className={this.props.sideBar}>

CSS:

#sideNavBar {
  transform: translateX(-150px);
  transition: transform 400ms ease-in;
    background-image: linear-gradient(to right, #000000, #3B3B3B);
    position: fixed;
    z-index: 1;
    min-height: 800px;
    width: 180px;
    opacity: 0.8;
}

#sideNavBar.SideBar {
  transform: translateX(0);
}

#sideNavBar.SideBar_hidden {
  transform: translateX(-100%);
}

-------------------------------------------- ----------附加组件 应用程序.js .....

 class App extends Component {
      constructor() {
        super();
        this.state = {
          isBlog: false,
          isPhotography: false,
          isDesign: false,
          sideBar: 'SideBar_hidden'
        }
        this.selectPage = this.selectPage.bind(this);
      }

  selectPage = (event) => {
    event.preventDefault();
    if ((event.target.name)==='blog') {
    this.setState({sideBar: 'SideBar', isBlog: true, isPhotography: false, isDesign: false})
    }
    else if((event.target.name)==='photography') {
    this.setState({sideBar: 'SideBar', isBlog: false, isPhotography: true, isDesign: false})
    }
    else if ((event.target.name)==='design') {
    this.setState({sideBar: 'SideBar', isPhotography: false, isDesign: true})
    };
  }

  render() {
    return (
        <BrowserRouter>
        <div className="App">
        <Navigation selectPage={this.selectPage}/>
          <div className="content">
            <div className="body">
        <Switch>
        <Route exact path='/' render={(routeProps) => (<div><SideBar sideBar={this.state.sideBar}/></div>)}/>
        </Switch>
            <Switch>
            <Route path='/blog' render={(routeProps) => (<div><SideBar sideBar={this.state.sideBar}/>
              <Blog /></div>)}/>
            </Switch>
            <Switch>
            <Route path='/photography' render={(routeProps) => (<div><SideBar sideBar={this.state.sideBar}/>
              <Photography/></div>)}/>
            </Switch>
            <Switch>
            <Route path='/design' render={(routeProps) => (<div><SideBar sideBar={this.state.sideBar}/>
              <Design/></div>)}/>
            </Switch>
            </div>
            <div className="footer">
            </div>
          </div>
        </div>
        </BrowserRouter>
    );
  }
}

export default App;

从“/”单击任何菜单链接(博客等)，侧边栏菜单就会弹出。如果我在“/blog”路径并刷新页面以将状态设置回隐藏，然后单击博客链接它会滑入。但是如果我在/blog 刷新页面以将状态设置为隐藏并单击非博客，而不是设计，它会再次弹出，而不是滑入。我该如何解决这个问题？

Answer 1

我多次不必要地调用 SideBar 组件。现在它只加载一次并且动画有效。