在React JS中隐藏特定组件的页眉和页脚

import React, { Component } from 'react';

class MyComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      showHeader: true,
      showFooter: true
    };
  }

  toggleHeader = () => {
    this.setState(prevState => ({
      showHeader: !prevState.showHeader
    }));
  }

  toggleFooter = () => {
    this.setState(prevState => ({
      showFooter: !prevState.showFooter
    }));
  }

  render() {
    const { showHeader, showFooter } = this.state;

    return (
      <div>
        <button onClick={this.toggleHeader}>
          {showHeader ? 'Hide Header' : 'Show Header'}
        </button>
        <button onClick={this.toggleFooter}>
          {showFooter ? 'Hide Footer' : 'Show Footer'}
        </button>

        {showHeader && <Header />}
        <Content />
        {showFooter && <Footer />}
      </div>
    );
  }
}

const Header = () => {
  return <header>Header Component</header>;
};

const Content = () => {
  return <div>Content Component</div>;
};

const Footer = () => {
  return <footer>Footer Component</footer>;
};

export default MyComponent;