<p>点击blogItem时，我如何将数据从<code>blogItem.js</code>组件传递到<code>blogDetails.js</code>组件？然而，blogItem组件是在Home.js组件中导入的。请问我应该在哪里添加点击动作？有人能分享一个例子吗？</p>
<p>CodeSandboX链接
https://codesandbox.io/s/gallant-water-5bmueq?file=/src/blogItem.js:0-1876</p>
<pre class="brush:php;toolbar:false;">// App.js
import { BrowserRouter, Route, Routes, Switch } from "react-router-dom";
import Home from "./src/Home";
import BlogItem from "./src/blogItem";
function App() {
return (
<div className="App">
<BrowserRouter>
<Routes>
<Route path="/" element={<Home />}></Route>
<Route path="/blogItem" element={<BlogItem />}></Route>
</Routes>
</BrowserRouter>
</div>
);
}
export default App;
//Home.js
import "./styles.css";
import React, { useState, useEffect, useCallback } from "react";
import BlogItem from "./blogItem";
const Home = (props) => {
const [blogItem, setBlogItem] = useState(props);
useEffect(() => {
setBlogItem(props);
}, [props]);
return (
<div id="App">
<BlogItem />
</div>
）；
};
导出默认首页；
// BlogItem.js
导入“./styles.css”；
从“react”导入 React, { useState, useEffect, useCallback };
常量博客数据 = [
{
编号: 1,
日期：“2023 年 1 月 25 日”，
照片：“https://picsum.photos/80”，
标题：“赛普拉斯设置博客”，
博客详细信息：
“此处添加了最佳标题。此处添加了最相关的数据。有史以来最伟大的。总是在这里打球不是一个好主意。”
},
{
编号: 2,
日期：“2022 年 1 月 22 日”，
照片：“https://picsum.photos/80”，
标题：“反应状态详细信息”，
博客详细信息：
“此处添加了最佳标题。此处添加了最相关的数据。有史以来最伟大的。总是在这里打球不是一个好主意。”
}
];
const BlogItem = ({ id, 日期, 照片, 标题, blogDetails }) =>; {
const [searchResults, setSearchResults] = useState(blogData);
const [state, setState] = useState({ id, 日期, 照片, 标题, blogDetails });
const 列 = () => (
{searchResults.map(({ id, 日期, 照片, 标题, blogDetails }) => (
<键={id}>
<img alt=“id” src={照片} //>
{日期}
cypress
{标题}
<p>
此处添加了最佳标题。此处添加了最相关的数据。
有史以来最伟大的。总是在这里玩不是一个好主意。
</p>
阅读更多→
</a>
</a>
))}
;
）；
return <列 {...state} />;
};
导出默认 BlogItem;</pre>
<p>// BlogDetails.js</p>
从“react”导入React；
const BlogDetails = () =>; {
返回 （
ddd
<p>博客详细信息</p>
<预>
const data = []; data.push(“足球”);
</前>
）；
};
导出默认 BlogDetails;</pre></p> 
首先，在index.js文件中创建
browserRouter，并从app.js文件中移除它，并为BlogDetailscomponent创建一个Route：<BrowserRouter> <Routes> <Route path="/" element={<Home />}></Route> <Route path="/blogItem" element={<BlogItem />}></Route> <Route path="/blogDetails" element={<BlogDetails />}></Route> </Routes> </BrowserRouter>然后你需要安装'react-router-dom'包。
在BlogItem.js文件中导入
useNavigate：import { useNavigate } from "react-router-dom"; const navigate = useNavigate(); // 在函数组件内部使用现在你可以给你想要点击的
element添加onClick，以便重定向到/blogDetails，例如：<div className="blogImageSection" onClick={() => navigate('blogDetails', { state: {id, date, photo, heading, blogDetails } }) // 这是如何使用useNavigate传递数据的方法 }> ... </div>最后，在BlogDetails.js文件中：
import { useLocation } from "react-router-dom"; const location = useLocation(); // 在函数组件内部使用你可以像这样访问传递的数据：