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%);
}

-------------------------------------------------- ----------附加组件 App.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组件。现在只加载一次，动画就可以正常工作。

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

1 个答案: