所以我的支付组件有问题。基本上我想要当我按下链接时,它会将(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;
答案 0 :(得分:1)
为了发送特定的产品数据,您可以使用路由转换的路由状态。
<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>
);
}