React隐藏组件而不使用react路由器

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

  toggleComponent = () => {
    this.setState(prevState => ({
      showComponent: !prevState.showComponent
    }));
  }

  render() {
    return (
      <div>
        <button onClick={this.toggleComponent}>Toggle Component</button>
        {this.state.showComponent && <HiddenComponent />}
      </div>
    );
  }
}

class HiddenComponent extends React.Component {
  render() {
    return <div>This is a hidden component.</div>;
  }
}

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

  toggleComponent = () => {
    this.setState(prevState => ({
      showComponent: !prevState.showComponent
    }));
  }

  render() {
    return (
      <div>
        <button onClick={this.toggleComponent}>Toggle Component</button>
        <div className={this.state.showComponent ? 'hidden' : ''}>
          This is a hidden component.
        </div>
      </div>
    );
  }
}