React Hooks中使用onClick傳遞資料的方法

Question

<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>

Answer 1

首先，在index.js檔案中建立browserRouter，並從app.js檔案中移除它，並為BlogDetails component建立一個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'套件。

npm i 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(); // 在函数组件内部使用

你可以這樣存取傳遞的資料：

const myRecievedData = location.state