So verwenden Sie onClick zum Übergeben von Daten in React Hooks

Question

Wie übergebe ich Daten von der Komponente blogItem.js an die Komponente blogDetails.js Die blogItem-Komponente wird jedoch in die Home.js-Komponente importiert. Sagen Sie mir bitte, wo soll ich die Klickaktion hinzufügen? Kann jemand ein Beispiel nennen?

CodeSandboX-Link https://codesandbox.io/s/gallant-water-5bmueq?file=/src/blogItem.js:0-1876

// App.js

import { BrowserRouter, Route, Routes, Switch } aus „react-router-dom“;
Home importieren von „./src/Home“;
BlogItem aus "./src/blogItem" importieren;

Funktion App() {
  zurückkehren (
    <div className="App">
      <BrowserRouter>
        <Routen>
          <Route path="/" element={<Home />}></Route>
          <Route path="/blogItem" element={<BlogItem />}></Route>
        </Routen>
      </BrowserRouter>
    </div>
  );
}
Standard-App exportieren;

//Home.js

import "./styles.css";
import React, { useState, useEffect, useCallback } aus „react“;
BlogItem aus "./blogItem" importieren;
const Home = (props) =>
  const [blogItem, setBlogItem] = useState(props);

  useEffect(() => {
    setBlogItem(props);
  }, [Requisiten]);

  zurückkehren (
    <div id="App">
      <BlogItem />
    </div>
  );
};

Standard-Home exportieren;
  
// BlogItem.js 

import "./styles.css";
import React, { useState, useEffect, useCallback } aus „react“;

const blogData = [
  {
    ID: 1,
    Datum: "25. Januar 2023",
    Foto: "https://picsum.photos/80",
    Überschrift: „Cypress-Setup-Blog“,
    BlogDetails:
      „Beste Überschrift hier hinzugefügt.“ Die relevantesten Daten hier hinzugefügt. Größter aller Zeiten. Es wäre keine gute Idee, immer hier zu spielen."
  },
  {
    ID: 2,
    Datum: "22. Jan. 2022",
    Foto: "https://picsum.photos/80",
    Überschrift: „Zustandsdetails reagieren“,
    BlogDetails:
      „Beste Überschrift hier hinzugefügt.“ Die relevantesten Daten hier hinzugefügt. Größter aller Zeiten. Es wäre keine gute Idee, immer hier zu spielen."
  }
];

const BlogItem = ({ id, date, photo, heading, blogDetails }) => {
  const [searchResults, setSearchResults] = useState(blogData);

  const [state, setState] = useState({ id, date, photo, heading, blogDetails });

  const Columns = () => (
    <div className="blogItems">
      <div className="row">
        <div className="blogArea">
          {searchResults.map(({ id, date, photo, heading, blogDetails }) => (
            <a key={id}>
              <div className="blogImageSection">
                <img alt="id" src={photo} />
                <div key={id} className="dataArea">
                  <span className="dataDate">{date}</span>
                  <span className="tags">cypress</span>
                  <h3>{heading}</h3>
                  <p>
                    Beste Überschrift hier hinzugefügt. Die relevantesten Daten hier hinzugefügt.
                    Größter aller Zeiten. Es wird keine gute Idee sein, immer hier zu spielen.
                  </p>
                  <a href="_blank" className="readmoreLink">
                    Weiterlesen →
                  </a>
                </div>
              </div>
            </a>
          ))}
        </div>
      </div>
    </div>
  );
  return <Columns {...state} />;
};

Standard-BlogItem exportieren;

// BlogDetails.js

import React from "react";

const BlogDetails = () => {
  zurückkehren (
    <div id="App">
      <div className="blogDetailsSection">
        <div className="row">
          <div className="individual-blogs">
            <h2>ddd</h2>
            <p>Blogdetails</p>
            <vor>
              <code>const data = []; data.push("soccer");</code>
            

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