reactjs - 在 react 路由器 dom v6 中渲染

Question

我正在关注如何呈现函数并传递属性以从 dom 获取一些数据的示例。

--- 应用程序.jsx ---

import { Routes, Route } from "react-router-dom";

// Components
import Listado from "./components/Listado";
import Detalle from "./components/Detalle";

function App() {

  const addOrRemoveFromFavs = e => {
    const btn = e.currentTarget;  // console.log(btn);
    const parent = btn.parentElement; // console.log(parent)
    const imgURL = parent.querySelector('img').getAttribute('src'); 
    const title = parent.querySelector('h5').innerText;
    const overview = parent.querySelector('p').innerText;
    
const movieData = {
      imgURL, title, overview
    }
    console.log(movieData);
  }

  return (
    <>
      <Header />
      <div className="container mt-3">
        <Routes>
          <Route path="/" element={<Login />} />
          <Route path="/listado" render={ (props) => <Lisstado addOrRemoveFromFavs={addOrRemoveFromFavs} {...props}/>} />
          <Route path="/detalle" element={<Detalle />} />
          </Routes>
      </div>
      <Footer />
    </>
  );

根据react v6中的文档，render或component不再使用，所以我不知道如何传递信息，这里我展示了另一部分代码，我想分享功能并从这里获取来自 DOM 的数据。按照示例制作 Prop 的控制台时，您应该得到一个带有信息的对象，但它不是那样的，而且它停止加载信息，现在是空白。

-- listado.jsx ---

import { useEffect, useState } from "react";

import { Link, Navigate } from "react-router-dom";
import axios from "axios";
import swAlert from "@sweetalert/with-react";


const Listado = (props) => {
  
  let token = sessionStorage.getItem('token');

  console.log(props);

  onst [ moviesList, setMoviesList ] = useState([]);

  useEffect(() => {
    const endpoint = 'https://api.themoviedb.org/3/discover/movie?api_key=8764e6417ae516fb86bc820ee865a6d8&language=es-US&page=1'
    axios.get(endpoint)
      .then(response => {
        const apiData = response.data;
        setMoviesList(apiData.results);
      })
      .catch(error => {
        swAlert(<h2>Hubo errores, intenta más tarde</h2>)
      })
  }, [setMoviesList]);  

  
  return (
    <>
    { !token && <Navigate to="/" /> }
    <div className="row">
    {
        moviesList.map((oneMovie, index) => {
          return (
            <div className="col-3" key={index}>
              <div className="card my-4">
                <img src={ `https://image.tmdb.org/t/p/w500/${oneMovie.poster_path}` } className="card-img-top" alt="..." />
                <button className="favourite-btn">
                  🖤
                </button>
                <div className="card-body">
                  <h5 className="card-title">{ oneMovie.title.substring(0, 20) }...</h5>
                  <p className="card-text">{ oneMovie.overview.substring(0, 100) }...</p>
                  <Link to={`/detalle?peliculitaID=${oneMovie.id}`} className="btn btn-primary">View Details</Link>
                </div>
              </div>
            </div>
          )
          })
        }
        </div>
    </>
  )
}

export default Listado

我很感激任何建议

Answer 1

如果您只是试图在 "/listado" 路径上呈现 Lisstado 组件并传递 addOrRemoveFromFavs Prop ，您可以这样做就像您将 props 传递给组件的任何其他时间一样。请记住，Route 组件在 element 属性上采用了 ReactNode，又名 JSX，因此传递属性是一样的React 中的任何其他地方。

例子:

<Routes>
  <Route path="/" element={<Login />} />
  <Route
    path="/listado"
    element={<Lisstado addOrRemoveFromFavs={addOrRemoveFromFavs} />}
  />
  <Route path="/detalle" element={<Detalle />} />
</Routes>

此外，您不应该在 DOM 中查询传递的回调中的值，而是将它们直接传递给子组件中的回调。

例子:

应用

const addOrRemoveFromFavs = movieData => e => {
  console.log(movieData);
}

列表

const Listado = ({ addOrRemoveFromFavs }) => {
  const token = sessionStorage.getItem('token');

  const [ moviesList, setMoviesList ] = useState([]);

  useEffect(() => {
    ...
  }, [setMoviesList]);

  if (!token) {
    return <Navigate to="/" />;
  }
  
  return (
    <div className="row">
      {moviesList.map((oneMovie, index) => {
        // create movieData object
        const movieData = {
          imgURL: `https://image.tmdb.org/t/p/w500/${oneMovie.poster_path}`,
          overview: oneMovie.overview,
          title: oneMovie.title
        };

        return (
          <div className="col-3" key={index}>
            <div className="card my-4">
              <img
                src={ `https://image.tmdb.org/t/p/w500/${oneMovie.poster_path}`}
                className="card-img-top"
                alt="..."
              />
              <button
                className="favourite-btn"
                onClick={addOrRemoveFromFavs(movieData)} // <-- pass to callback
              >
                🖤
              </button>
              <div className="card-body">
                <h5 className="card-title">
                  {oneMovie.title.substring(0, 20) }...
                </h5>
                <p className="card-text">
                  {oneMovie.overview.substring(0, 100) }...
                </p>
                <Link
                  to={`/detalle?peliculitaID=${oneMovie.id}`} 
                  className="btn btn-primary"
                >
                  View Details
                </Link>
              </div>
            </div>
          </div>
        )}
      )}
    </div>
  )
};