Question

所以我的支付组件有问题。基本上我想要当我按下链接时，它会将（ClassG imageG 和 PriceG）推送到支付组件中，在那里我可以再次设置它们的样式我已经尝试了一些东西，但是当我点击链接时它给了我直接的信息（Arayys）。那不是我想要的。如果可能的话，我想要一些帮助。提前致谢

import React from "react";
import data from "../data.json";
import { Link } from "react-router-dom";

function G() {
  return (
    <div className='bg-black '>
{data.filter(d =>
  d.classG &&
  d.imageG &&
  d.priceG)
  .map((postData) => {
        return (
          <div className='bg-black'  key={postData.id} >
            <div className='bg-black '>            
              <img
                alt=""
                className="w-full object-contain "
                src={postData.imageG}
              ></img>
              <h1 className=" ml-24 mlg:ml-6 mlg:mt-2 mlg:static text-5xl mlg:text-2xl text-blue-400 
               absolute top-48">
                {postData.classG}
              </h1>
              <h1 className="text-lg  mlg:mb-2 mlg:ml-6  mlg:mt-2 mlg:static font-bold text-green-800 
               font-mono ml-24 top-64  absolute" >
                {postData.priceG}
              </h1>
              <Link
                to={`/payment/${postData.id}`}
                className="py-1 px-2  mlg:ml-6 mlg:mt-14 mlg:static text-black-600 h-8  ml-24  top-72 bg- 
                white w-32 text-center text-gray-red
                rounded-full focus:outline-none focus:ring-2 focus:ring-gray-600 absolute" 
              >
                Buy Now
              </Link>
              <div id='New' className="flex flex-col mt-40 justify-center border-white text-center items- 
                center bg-black" >
              <h1 className='tracking-tighter mb-20 text-white text-base md:text-6xl'>What's new in 
                2021</h1>  
              <h1 className=' md:p-4 md:w-2/4 font-sans mb-16 text-white '>{postData.newG} </h1>                  
              </div>   
               </div>
                 </div>
           )
            }
    export default G

json file
[
{
    "id":1,
    "classG":"G-Class",
    "imageG":"./ModImages/Gclass.jpg",
    "priceG":"Starting at $154,900"
    "newE": "some text"

},
]

Payment Component
import React from "react";
import data from "./Models/data.json";
function Payment(props) {
  console.log(props);
  const {
    match: {
    params: { dataId }
    }
  } = props;
  const item = data.find(({ id }) => id === Number(dataId));
  return (
    <div className="ml-20">        
      <pre>{JSON.stringify(item, null, 2)}</pre>
    </div>
  );
}
export default Payment;

App Component
import React,{useState, useEffect} from 'react'
import './assets/main.css'
import {
  BrowserRouter as Router,
  Switch,
  Route,
  Link
} from "react-router-dom";

function App() {
  return (
    <div className='' >     
      <div>
          <Router>       
             <Header />     
          <Switch>        
            <Route path="/a">
              <A />
            </Route>
             <Route path="/payment/:dataId" component={Payment}>
             </Route>
           </Switch>  
           </Router>
            </div>
               </div>

  );
}
export default App;

Answer 1

为了发送特定的产品数据，您可以使用路由转换的路由状态。

Link - to: object

<Link
  to={{
    pathname: `/payment/${postData.id}`,
    state: {
      postData,
    },
  }}
  className="..." 
>

可以在 location 对象上的接收路由组件上访问路由状态。由 Route 的 render、component 或 children 属性呈现的组件接收所有 route props。

function Payment(props) {
  const {
    location: {
      state: {
        postData, // <-- access route state from location.state
      },
    },
    match: {
      params: { dataId }
    },
  } = props;

  const {
    classG,
    imageG,
    priceG,
    // ... any other postData object properties
  } = postData;
  
  return (
    <div className="ml-20">        
      <pre>{JSON.stringify(postData, null, 2)}</pre>
    </div>
  );
}

将数据从一个组件推送到另一个组件

1 个答案: