如何使用React中的按钮切换项目列表？

import React, { Component } from 'react';

class ProjectList extends Component {
  constructor(props) {
    super(props);
    this.state = {
      displayType: "grid", // 默认以网格形式显示项目
    };
  }

  toggleDisplayType = () => {
    this.setState(prevState => ({
      displayType: prevState.displayType === "grid" ? "list" : "grid",
    }));
  }

  render() {
    const { displayType } = this.state;
    // 根据 displayType 的值选择以网格或列表形式展示项目
    const projects = [
      { name: "项目1", description: "这是项目1的描述" },
      { name: "项目2", description: "这是项目2的描述" },
      { name: "项目3", description: "这是项目3的描述" },
    ];
    
    return (
      <div>
        <button onClick={this.toggleDisplayType}>切换显示方式</button>
        {displayType === "grid" ? (
          <div>
            {projects.map(project => (
              <div key={project.name}>
                <h3>{project.name}</h3>
                <p>{project.description}</p>
              </div>
            ))}
          </div>
        ) : (
          <ul>
            {projects.map(project => (
              <li key={project.name}>
                <h3>{project.name}</h3>
                <p>{project.description}</p>
              </li>
            ))}
          </ul>
        )}
      </div>
    );
  }
}

class ToggleDisplayButton extends Component {
  render() {
    return (
      <button onClick={this.props.onClick}>切换显示方式</button>
    );
  }
}

export default ProjectList;