在React中折叠和展开侧面板

import React, { Component } from 'react';

class SidePanel extends Component {
  constructor(props) {
    super(props);
    this.state = {
      isCollapsed: false
    };
  }

  render() {
    const { isCollapsed } = this.state;

    return (
      <div>
        <button onClick={this.toggleCollapse}>
          {isCollapsed ? '展开' : '折叠'}
        </button>
        {!isCollapsed && <div>这是侧面板的内容</div>}
      </div>
    );
  }

  toggleCollapse = () => {
    this.setState(prevState => ({
      isCollapsed: !prevState.isCollapsed
    }));
  }
}

export default SidePanel;

import React from 'react';
import SidePanel from './SidePanel';

function App() {
  return (
    <div>
      <h1>我的应用</h1>
      <SidePanel />
    </div>
  );
}

export default App;