React Add/Remove and Toggle Class of Sidebar with background overlay

Question

这是我的代码：http://codepen.io/rafaelfndev/pen/gmqmvo

我需要添加类：

.overflow 到 body

.overlay-active 到 .overlay

.sidebar-active 到 #sidebar

单击.show-sidebar 时需要添加，与具有此类的组件的位置无关。如果我点击.hide-sidebar，我需要删除这些类，如果我点击.toggle-class，我需要切换这些类...

我知道如何使用 jQuery 来做到这一点，但我在某处读到了使用 jQuery 操作 React 元素的错误...

我需要完全按照这段代码做的事情，但没有 jQuery，只使用 React 模式：

$('.toggle-sidebar').click(function(){
    $('#sidebar').toggleClass('sidebar-active');
    $('body').toggleClass('overflow');
    $('overlay').toggleClass('overlay-active');
});

$('.show-sidebar').click(function(){
    $('#sidebar').addClass('sidebar-active');
    $('body').addClass('overflow');
    $('overlay').addClass('overlay-active');
});

$('.hide-sidebar, overlay').click(function(){
    $('#sidebar').removeClass('sidebar-active');
    $('body').removeClass('overflow');
    $('overlay').removeClass('overlay-active');
});

Answer 1

我不确切知道您将哪些元素用于侧边栏，但我会将其视为 div，而将其他元素视为按钮。

您可以在主组件（控制侧边栏和按钮的组件）上保持状态，并通过每个按钮的 onClick 更改状态。在这种状态下，您可以在侧边栏上设置一些样式或使用 classenames lib 之类的东西激活类

我制作了这个codepen，展示了如何遵循这种方法，希望对你有所帮助。它基本上是一个 SideBar 组件，它接收一个名为“show”的道具，并使用它来改变 div 样式。 App 组件具有“显示”状态，该状态会随着按钮的单击而改变，并将其传递给 SideBar 组件。

代码如下：

class SideBar extends React.Component{
  render() {
    return <div style={{display: this.props.show?'block':'none'}}>
      I am a side bar!
    </div>
  }; 
}

class App extends React.Component{
  constructor(props){
    super(props);
    this.state = {show: true};
  }

  render(){
    return <div>
      <SideBar show={this.state.show}/>
      <button onClick={()=>this.setState({show: !this.state.show})} >toggle</button>
      <button onClick={()=>this.setState({show:true})} >add</button>
      <button onClick={()=>this.setState({show:false})}>remove</button>
    </div>
  }
}

ReactDOM.render(<App/>, document.getElementById('container'));