<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
:然后你需要安装'react-router-dom'包。
在BlogItem.js文件中导入
useNavigate
:现在你可以给你想要点击的
element
添加onClick
,以便重定向到/blogDetails
,例如:最后,在BlogDetails.js文件中:
你可以像这样访问传递的数据: