Comment utiliser onClick pour transmettre des données dans React Hooks

Question

Comment transmettre les données du composant blogItem.js au composant blogDetails.js Cependant, le composant blogItem est importé dans le composant Home.js. Veuillez me dire où dois-je ajouter l'action de clic ? Quelqu'un peut-il partager un exemple ?

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

// App.js

importer { BrowserRouter, Route, Routes, Switch } depuis "react-router-dom" ;
importer Home depuis "./src/Home" ;
importer BlogItem depuis "./src/blogItem";

fonction App() {
  retour (
    <div className="Application">
      <NavigateurRouter>
        <Itinéraires>
          <Chemin d'itinéraire="/" element={<Accueil />}></Route>
          <Chemin d'itinéraire="/blogItem" element={<BlogItem />}></Route>
        </Itinéraires>
      </NavigateurRouter>
    </div>
  );
}
exporter l'application par défaut ;

//Accueil.js

importer "./styles.css";
importer React, { useState, useEffect, useCallback } depuis "react" ;
importer BlogItem depuis "./blogItem" ;
const Accueil = (accessoires) =>
  const [blogItem, setBlogItem] = useState(props);

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

  retour (
    <div id="Application">
      <Article de blog />
    </div>
  );
} ;

exporter la maison par défaut ;
  
// BlogItem.js 

importer "./styles.css";
importer React, { useState, useEffect, useCallback } depuis "react" ;

const blogData = [
  {
    identifiant : 1,
    date : "25 janvier 2023",
    photo : "https://picsum.photos/80",
    titre : "Blog de configuration de Cypress",
    Détails du blog :
      "Meilleur titre ajouté ici. Les données les plus pertinentes ajoutées ici. Le meilleur de tous les temps. Ce ne sera pas une bonne idée de jouer toujours ici.
  },
  {
    identifiant : 2,
    date : "22 janvier 2022",
    photo : "https://picsum.photos/80",
    titre : "Détails de l'état de réaction",
    Détails du blog :
      "Meilleur titre ajouté ici. Les données les plus pertinentes ajoutées ici. Le meilleur de tous les temps. Ce ne sera pas une bonne idée de jouer toujours ici.
  }
];

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

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

  const Colonnes = () => (
    <div className="blogItems">
      <div className="ligne">
        <div className="blogArea">
          {searchResults.map(({ identifiant, date, photo, titre, blogDetails }) => (
            <une clé={id}>
              <div className="blogImageSection">
                <img alt="id" src={photo} />
                <div key={id} className="dataArea">
                  <span className="dataDate">{date}</span>
                  <span className="tags">cyprès</span>
                  <h3>{titre}</h3>
                  <p>
                    Meilleur titre ajouté ici. Les données les plus pertinentes ajoutées ici.
                    Le meilleur de tous les temps. Ce ne sera pas une bonne idée de jouer toujours ici.
                  </p>
                  <a href="_blank" className="readmoreLink">
                    Lire la suite →
                  ≪/a>
                </div>
              </div>
            ≪/a>
          ))}
        </div>
      </div>
    </div>
  );
  return <Colonnes {...état} />;
} ;

exporter le BlogItem par défaut;

// BlogDetails.js

importer React depuis "react" ;

const BlogDetails = () => {
  retour (
    <div id="Application">
      <div className="blogDetailsSection">
        <div className="ligne">
          <div className="blogs-individuels">
            <h2>jdd</h2>
            <p>Détails du blog</p>
            <pré>
              <code>const data = []; data.push("football");</code>
            ≪/pré>
          </div>
        </div>
      </div>
    </div>
  );
} ;

exporter les détails du blog par défaut;

Answer 1

Tout d'abord, créez un browserRouter dans le fichier index.js et supprimez-le du fichier browserRouter，并从app.js文件中移除它，并为BlogDetails component创建一个Routeapp.js

et créez un composant pour

BlogDetails

code>Route：

<BrowserRouter>
  <Routes>
      <Route path="/" element={<Home />}></Route>
      <Route path="/blogItem" element={<BlogItem />}></Route>
      <Route path="/blogDetails" element={<BlogDetails />}></Route>
   </Routes>
</BrowserRouter>

Ensuite, vous devez installer le package 'react-router-dom'.

npm i react-router-dom

useNavigateImporter

dans le fichier

BlogItem.jselement添加onClick，以便重定向到/blogDetails :

import { useNavigate } from "react-router-dom";
const navigate = useNavigate(); // 在函数组件内部使用

Vous pouvez maintenant donner le sur lequel vous souhaitez cliquer, par exemple :

<div className="blogImageSection"
onClick={() =>
  navigate('blogDetails', { state: {id, date, photo, heading, blogDetails } }) // 这是如何使用useNavigate传递数据的方法
}> ... </div>

Enfin, dans le fichier

BlogDetails.js

 : 🎜

import { useLocation } from "react-router-dom";
const location = useLocation(); // 在函数组件内部使用

🎜Vous pouvez accéder aux données transmises comme ceci : 🎜

const myRecievedData = location.state