在react.js中显示隐藏分区

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      showSection: false, // 控制显示隐藏分区的状态变量
    };
  }

  toggleSection = () => {
    this.setState((prevState) => ({
      showSection: !prevState.showSection,
    }));
  };

  render() {
    return (
      <div>
        <button onClick={this.toggleSection}>Toggle Section</button>
        {this.state.showSection && <div>Hidden Section Content</div>}
      </div>
    );
  }
}

class ParentComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      showSection: false, // 控制显示隐藏分区的状态变量
    };
  }

  toggleSection = () => {
    this.setState((prevState) => ({
      showSection: !prevState.showSection,
    }));
  };

  render() {
    return (
      <div>
        <button onClick={this.toggleSection}>Toggle Section</button>
        <ChildComponent showSection={this.state.showSection} />
      </div>
    );
  }
}

const ChildComponent = (props) => {
  const { showSection } = props;
  return <div>{showSection && <div>Hidden Section Content</div>}</div>;
};