javascript - 使用背景覆盖 react 添加/删除和切换侧边栏类

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”的 Prop ，并使用它来改变 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'));