React+TypeScript项目中点击月份如何打开新组件？

根据你使用React+TypeScript+Material UI的场景，以下三种常用实现方式对应不同需求：

方案1：用Material UI Dialog弹窗（模态视图） #

适合不需要独立URL、仅临时展示详情的场景，完全复用MUI组件生态：

修改步骤 #

1. 导入MUI的弹窗相关组件
2. 添加状态控制弹窗显隐及存储选中月份的完整数据
3. 修改handleMonthClick触发弹窗并传递选中月份数据
4. 在组件中渲染弹窗，内部放置详情组件

修改后的完整代码 #

import React, { useState } from 'react';
import MonthCard from './MonthCard';
import { Dialog, DialogTitle, DialogContent, Typography } from '@mui/material';
// 假设你已创建MonthDetail详情组件，也可直接在弹窗内写内容
import MonthDetail from './MonthDetail';

const Dashboard: React.FC = () => {
  const months = [
    { month: 'January', passRate: 80 },
    { month: 'February', passRate: 75 },
    // 可添加更多月份数据
  ];

  // 控制弹窗状态与选中月份数据
  const [openDetail, setOpenDetail] = useState(false);
  const [selectedMonth, setSelectedMonth] = useState<typeof months[0] | null>(null);

  const handleMonthClick = (monthData: typeof months[0]) => {
    setSelectedMonth(monthData);
    setOpenDetail(true);
  };

  const handleCloseDialog = () => {
    setOpenDetail(false);
    setSelectedMonth(null);
  };

  return (
    <div>
      <h1>Dashboard</h1>
      {months.map((m) => (
        <MonthCard
          key={m.month}
          month={m.month}
          passRate={m.passRate}
          onClick={() => handleMonthClick(m)} // 传递完整月份数据而非仅名称
        />
      ))}

      {/* MUI弹窗组件 */}
      <Dialog open={openDetail} onClose={handleCloseDialog} maxWidth="sm" fullWidth>
        <DialogTitle>{selectedMonth?.month} 详情</DialogTitle>
        <DialogContent>
          {selectedMonth && <MonthDetail monthData={selectedMonth} />}
          {/* 若未创建详情组件，可直接写内容：
          <Typography variant="body1">月度通过率: {selectedMonth?.passRate}%</Typography>
          */}
        </DialogContent>
      </Dialog>
    </div>
  );
};

export default Dashboard;

方案2：用React Router跳转独立页面（带URL） #

适合需要将详情页作为独立路由、支持浏览器前进/后退及书签的场景：

修改步骤 #

1. 安装React Router依赖：npm install react-router-dom @types/react-router-dom
2. 在全局路由配置中添加详情页路由
3. 修改handleMonthClick调用路由跳转方法
4. 新建详情页组件接收路由参数

修改后的Dashboard代码 #

import React from 'react';
import MonthCard from './MonthCard';
import { useNavigate } from 'react-router-dom';

const Dashboard: React.FC = () => {
  const months = [
    { month: 'January', passRate: 80 },
    { month: 'February', passRate: 75 },
    // 可添加更多月份数据
  ];

  const navigate = useNavigate();

  const handleMonthClick = (monthName: string) => {
    // 跳转到详情页，传递月份名称作为路由参数
    navigate(`/dashboard/month/${monthName}`);
  };

  return (
    <div>
      <h1>Dashboard</h1>
      {months.map((m) => (
        <MonthCard
          key={m.month}
          month={m.month}
          passRate={m.passRate}
          onClick={() => handleMonthClick(m.month)}
        />
      ))}
    </div>
  );
};

export default Dashboard;

全局路由配置示例（如App.tsx） #

import { BrowserRouter, Routes, Route } from 'react-router-dom';
import Dashboard from './Dashboard';
import MonthDetailPage from './MonthDetailPage';

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/dashboard" element={<Dashboard />} />
        <Route path="/dashboard/month/:monthName" element={<MonthDetailPage />} />
      </Routes>
    </BrowserRouter>
  );
}

方案3：条件渲染内嵌组件（页面内切换视图） #

适合在当前仪表盘页面内直接切换显示内容、不需要弹窗或路由跳转的场景：

修改步骤 #

1. 添加状态存储选中月份数据
2. 根据状态决定渲染仪表盘卡片或详情组件
3. 添加返回按钮重置状态回到仪表盘视图

修改后的代码 #

import React, { useState } from 'react';
import MonthCard from './MonthCard';
import MonthDetail from './MonthDetail';
import { Button } from '@mui/material';

const Dashboard: React.FC = () => {
  const months = [
    { month: 'January', passRate: 80 },
    { month: 'February', passRate: 75 },
    // 可添加更多月份数据
  ];

  const [selectedMonth, setSelectedMonth] = useState<typeof months[0] | null>(null);

  const handleMonthClick = (monthData: typeof months[0]) => {
    setSelectedMonth(monthData);
  };

  const handleBackToDashboard = () => {
    setSelectedMonth(null);
  };

  // 选中月份时渲染详情，否则渲染仪表盘卡片
  if (selectedMonth) {
    return (
      <div>
        <Button variant="outlined" onClick={handleBackToDashboard}>返回仪表盘</Button>
        <MonthDetail monthData={selectedMonth} />
      </div>
    );
  }

  return (
    <div>
      <h1>Dashboard</h1>
      {months.map((m) => (
        <MonthCard
          key={m.month}
          month={m.month}
          passRate={m.passRate}
          onClick={() => handleMonthClick(m)}
        />
      ))}
    </div>
  );
};

export default Dashboard;

内容的提问来源于stack exchange，提问作者coolest-duck