React Hooks中点击blogItem向BlogDetails组件传值的实现方案

问题说明 #

点击BlogItem.js中的博客条目时，如何将对应博客的数据传递到BlogDetails.js组件？已知BlogItem被导入在Home.js中，点击事件应该添加在何处？

核心思路 #

借助react-router-dom的路由能力，通过动态路由参数传递博客ID，在BlogDetails组件中根据ID匹配对应数据；点击事件需添加在BlogItem中每个博客条目的可点击容器上。

具体步骤及代码修改 #

1. 完善路由配置（App.js） #

添加BlogDetails的路由，并配置动态参数:id用于接收博客ID：

// App.js
import { BrowserRouter, Route, Routes } from "react-router-dom";
import Home from "./src/Home";
import BlogItem from "./src/blogItem";
import BlogDetails from "./src/BlogDetails"; // 导入BlogDetails组件

function App() {
  return (
    <div className="App">
      <BrowserRouter>
        <Routes>
          <Route path="/" element={<Home />}></Route>
          <Route path="/blog/:id" element={<BlogDetails />}></Route> {/* 配置动态路由 */}
        </Routes>
      </BrowserRouter>
    </div>
  );
}
export default App;

2. 修改BlogItem组件，添加点击事件与路由跳转 #

点击事件绑定在每个博客条目的外层容器上，使用useNavigate实现带ID的路由跳转：

// BlogItem.js
import "./styles.css";
import React, { useState } from "react";
import { useNavigate } from "react-router-dom"; // 导入路由跳转钩子

const blogData = [
  {
    id: 1,
    date: "25 Jan 2023",
    photo: "https://picsum.photos/80",
    heading: "Cypress setup blog",
    blogDetails:
      "Best heading added here. The most relevant data added here. Greatest of all time. Wont be a good idea play here always."
  },
  {
    id: 2,
    date: "22 Jan 2022",
    photo: "https://picsum.photos/80",
    heading: "React state details",
    blogDetails:
      "Best heading added here. The most relevant data added here. Greatest of all time. Wont be a good idea play here always."
  }
];

const BlogItem = () => {
  const [searchResults, setSearchResults] = useState(blogData);
  const navigate = useNavigate(); // 初始化跳转方法

  // 点击博客条目触发的方法
  const handleBlogClick = (blogId) => {
    navigate(`/blog/${blogId}`); // 跳转到详情页并携带ID
  };

  return (
    <div className="blogItems">
      <div className="row">
        <div className="blogArea">
          {searchResults.map((blog) => (
            <div 
              key={blog.id} 
              className="blogImageSection"
              onClick={() => handleBlogClick(blog.id)} {/* 绑定点击事件 */}
              style={{ cursor: "pointer" }} {/* 提示可点击 */}
            >
              <img alt={blog.heading} src={blog.photo} />
              <div className="dataArea">
                <span className="dataDate">{blog.date}</span>
                <span className="tags">cypress</span>
                <h3>{blog.heading}</h3>
                <p>{blog.blogDetails}</p>
                <span className="readmoreLink">Read more →</span>
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
};

export default BlogItem;

注：移除了原代码中嵌套的<a>标签，避免默认跳转与路由跳转冲突；点击事件直接绑定在每个博客条目的外层容器，这就是点击事件的正确添加位置。

3. 修改BlogDetails组件，根据路由参数获取数据 #

使用useParams获取路由中的ID，匹配对应博客数据并渲染：

// BlogDetails.js
import React from "react";
import { useParams } from "react-router-dom";

const blogData = [
  {
    id: 1,
    date: "25 Jan 2023",
    photo: "https://picsum.photos/80",
    heading: "Cypress setup blog",
    blogDetails:
      "Best heading added here. The most relevant data added here. Greatest of all time. Wont be a good idea play here always."
  },
  {
    id: 2,
    date: "22 Jan 2022",
    photo: "https://picsum.photos/80",
    heading: "React state details",
    blogDetails:
      "Best heading added here. The most relevant data added here. Greatest of all time. Wont be a good idea play here always."
  }
];

const BlogDetails = () => {
  const { id } = useParams(); // 获取路由参数中的ID
  const blog = blogData.find(item => item.id === parseInt(id)); // 匹配对应博客

  if (!blog) {
    return <div>博客不存在</div>;
  }

  return (
    <div id="App">
      <div className="blogDetailsSection">
        <div className="row">
          <div className="individual-blogs">
            <img alt={blog.heading} src={blog.photo} />
            <span className="dataDate">{blog.date}</span>
            <h2>{blog.heading}</h2>
            <p>{blog.blogDetails}</p>
          </div>
        </div>
      </div>
    </div>
  );
};

export default BlogDetails;

4. 简化Home组件（移除冗余逻辑） #

原Home组件中的useState和useEffect无实际作用，直接渲染BlogItem即可：

// Home.js
import "./styles.css";
import React from "react";
import BlogItem from "./blogItem";

const Home = () => {
  return (
    <div id="App">
      <BlogItem />
    </div>
  );
};

export default Home;

关键说明 #

• 点击事件添加位置：每个博客条目的外层容器（blogImageSection类名的div），确保用户点击整个条目区域都能触发跳转。
• 数据传递方式：通过路由动态参数传递ID，详情页根据ID获取完整数据，这是React Router中跨路由组件传递数据的标准方案。

内容的提问来源于stack exchange，提问作者soccerway