如何在React多组件中传递Props并实现选中CourseCard的详情页面动态渲染

没问题！要实现点击CourseCard后在CourseKits页面动态显示对应课程的标题，我们可以借助React Router来传递路由参数——这是React单页应用中页面间传递数据最常用的方案。下面是一步步的实现方法：

1. 确保项目已配置React Router #

首先，如果你还没安装React Router，先执行安装命令：

npm install react-router-dom
# 或者用yarn
yarn add react-router-dom

然后在项目的路由配置文件（比如App.js）中，为CourseKits页面添加带参数的路由：

import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import Kits from './path/to/Kits'; // 替换成你的Kits组件实际路径
import CourseKits from './path/to/CourseKits'; // 替换成你的CourseKits组件实际路径

function App() {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<Kits />} />
        {/* 配置带课程名称参数的路由 */}
        <Route path="/course-kits/:courseName" element={<CourseKits />} />
      </Routes>
    </Router>
  );
}

export default App;

2. 修改CourseCard组件，传递课程参数 #

把原来的原生<a>标签换成React Router的<Link>组件，这样可以实现单页跳转并传递参数。同时对课程名称进行编码，避免空格、特殊字符等导致路由解析错误：

import { Link } from 'react-router-dom';

export default function CourseCard(props) {
  // 编码课程名称，处理特殊字符
  const encodedCourse = encodeURIComponent(props.course);
  
  return (
    <Link to={`/course-kits/${encodedCourse}`}>
      <div className="bg-white border border-gray-100 rounded-lg text-center shadow-lg align-center hover:cursor-pointer hover:shadow-xl hover:-translate-y-2 transition m-6" >
        <div>
          <img src={props.img} alt={`${props.course} Course Hero`} className="w-full h-44 object-cover" />
        </div>
        <p className="px-10 py-2 mb-3 mt-3 text-gray-500" >
          {props.course}
        </p>
      </div>
    </Link>
  )
}

3. 在CourseKits页面接收参数并动态渲染 #

使用React Router的useParams钩子获取路由参数，解码后作为页面标题：

import { useParams } from 'react-router-dom';
import ContentWrapper from './path/to/ContentWrapper'; // 保持你的原有组件引用

export default function CourseKits() {
  // 获取路由中的课程名称参数
  const { courseName } = useParams();
  // 解码参数，恢复原始课程名称
  const courseTitle = decodeURIComponent(courseName);

  return (
    <ContentWrapper>
      {/* 动态渲染页面标题 */}
      <h1 className="text-2xl font-bold p-5">{courseTitle}</h1>
      
      {/* 这里可以根据courseTitle添加更多动态内容，比如课程详情、套件列表等 */}
      <div className="bg-gray-200 m-5 p-4">
        <p>欢迎来到{courseTitle}的课程套件页面！</p>
      </div>
    </ContentWrapper>
  )
}

额外优化建议 #

如果你的课程数据包含更多信息（比如课程ID、描述等），更推荐传递课程ID作为路由参数，然后在CourseKits页面通过ID从数据源（API、本地数据数组）中获取完整的课程信息，这样比直接传递长文本更高效且更易维护。

内容的提问来源于stack exchange，提问作者Mateo Matijević Bošnjak