结合使用react和react-state关闭侧边栏

npm install react react-dom

import React, { Component } from 'react';

class Sidebar extends Component {
  constructor(props) {
    super(props);
    this.state = {
      isOpen: true, // 默认侧边栏是打开的
    };
  }

  render() {
    // 根据状态变量来决定侧边栏的显示与隐藏
    const sidebarStyle = {
      display: this.state.isOpen ? 'block' : 'none',
    };

    return (
      <div className="sidebar" style={sidebarStyle}>
        {/* 侧边栏内容 */}
      </div>
    );
  }
}

export default Sidebar;

import React, { Component } from 'react';
import Sidebar from './Sidebar';

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      showSidebar: true, // 默认显示侧边栏
    };
  }

  toggleSidebar = () => {
    this.setState(prevState => ({
      showSidebar: !prevState.showSidebar,
    }));
  }

  render() {
    return (
      <div>
        <button onClick={this.toggleSidebar}>Toggle Sidebar</button>
        {this.state.showSidebar && <Sidebar />}
      </div>
    );
  }
}

export default App;