从 json 呈现特定内容
[英] Rendering specific Content from json
本文介绍了从 json 呈现特定内容的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
所以,你好,我的问题是这样的.我有一个 C 类组件,它是位于 data.json 中的映射内容",稍后我将添加更多内容,但是,在 C 类中,我有一个按钮当前将我推到付款页面,我想要按钮被按下,它只将内容(图像,价格,类)从 json 呈现到付款页面,在那里我可以再次设置它的样式,基本上就是它.提前致谢
data.json
<预><代码>[{id":0,等级":A级",信息":A 是最便宜的",imgA":./ModImages/Aclass.jpg",textA":fdsd",trefuA":fdsd",选项A":fdsd"},{id":1,imgB":./ModImages/Bclass.jpg",B级":B级",priceB":$46,400",textB":fdsd",trefuB":fdsd",optionB":fdsd"},{id":2,C级":C级",imgC":./ModImages/Cclass.jpg",priceC":$46,400",textC":fdsd",trefuC":fdsd",optionc":fdsd"}]
C 类组件
从 'react' 导入 React从'./data.json'导入数据从反应路由器"导入 { useHistory }函数 C() {让历史 = useHistory();函数 handleClick() {history.push("/payment");}返回 (<div >{data.map((postData) =>{控制台日志(postData)返回(<div className='绝对'><button onClick={handleClick}className=' absolute text-black-600 h-10 ml-24 mt-32 bg-white w-36rounded-full focus:outline-none focus:ring-2 focus:ring-gray-600'>Buy Now</button><img className='w-screen object-contain'src={postData.imgC}></img><h1 className='absolute ml-24 md:text-5xl sm:text-5xl top-8'>{postData.classC}</h1><h1 className='text-base font-mono absolute ml-24 top-24'>{postData.priceC}</h1>
)})}
)}导出默认 C
应用组件
import React,{useState, useEffect} from 'react'导入'./assets/main.css'进口 {BrowserRouter 作为路由器,转变,路线,关联} 来自反应路由器-dom";从'./Header'导入标题从 './Home' 导入 Home从 './Models/A' 导入 A从 './Models/B' 导入 B从 './Models/C' 导入 C从'./Payment'导入付款;功能应用(){返回 (<div ><div ><路由器><标题/><开关><路由路径=/payment"><付款/></路线><路由路径=/C"><C/></路线><路由路径=/B"><B/></路线><路由路径=/A"><A/></路线><路由路径=/"><首页/></路线></开关></路由器>
);}导出默认应用程序;
首页组件
从 'react' 导入 React进口 {BrowserRouter 作为路由器,导航链接} 来自反应路由器-dom";函数主页(){返回 (<div className='ml-20'><nav className='bg-red-50 max-w-full'><ul ><li><链接到=/A">A级</链接><li><链接到=/B">B级</链接><li><链接到=/C">C-Class</Link></nav>
)}导出默认首页
解决方案
你可能应该把你的路由改成带参数的路由
</Route>
并将 button
转换为一个 Link
,它也传递 id
<链接to={`/payment/${postData.id}`}
和Payment
组件
- 还包括对
data.json
的访问- 从 props 中获取 url 参数
- 使用提供的参数在数据中查找相关项
像这样:https://codesandbox.io/s/festive-spence-bw18s?file=/src/App.js
So, Hello My problem is this. I have a C-class Component that is 'maping content' that is located in data.json I will add more content later but, in C class I have a button that is currently pushing me to the Payment page, I want when the button is pressed, that it renders the content(image, price, class) only that content from json into the Payment page where I can style it once again that would be basically it. Thanks in Advance
data.json
[
{
"id":0,
"class":"A-Class",
"Info": "A is the cheapest one ",
"imgA":"./ModImages/Aclass.jpg",
"textA":"fdsd",
"trefuA":"fdsd",
"optionA":"fdsd"
},
{
"id":1,
"imgB":"./ModImages/Bclass.jpg",
"classB":"B-Class",
"priceB":"$46,400",
"textB":"fdsd",
"trefuB":"fdsd",
"optionB":"fdsd"
},
{
"id":2,
"classC":"C-Class",
"imgC":"./ModImages/Cclass.jpg",
"priceC":"$46,400",
"textC":"fdsd",
"trefuC":"fdsd",
"optionc":"fdsd"
}
]
C Class Component
import React from 'react'
import data from './data.json'
import { useHistory } from 'react-router'
function C() {
let history = useHistory();
function handleClick() {
history.push("/payment");
}
return (
<div >
{data.map((postData) =>{
console.log(postData)
return(
<div key=
{postData.id}>
<div className='absolute '>
<button onClick={handleClick}className=' absolute text-black-600 h-10 ml-24 mt-32 bg-white w-
36 rounded-full focus:outline-none focus:ring-2 focus:ring-gray-600'>Buy Now</button>
<img className='w-screen object-contain'src={postData.imgC}></img>
<h1 className='absolute ml-24 md:text-5xl sm:text-5xl top-8'>{postData.classC}</h1>
<h1 className='text-base font-mono absolute ml-24 top-24'>{postData.priceC}</h1>
</div>
</div>
)
})
}
</div>
)
}
export default C
App Component
import React,{useState, useEffect} from 'react'
import './assets/main.css'
import {
BrowserRouter as Router,
Switch,
Route,
Link
} from "react-router-dom";
import Header from './Header'
import Home from './Home'
import A from './Models/A'
import B from './Models/B'
import C from './Models/C'
import Payment from './Payment';
function App() {
return (
<div >
<div >
<Router>
<Header />
<Switch>
<Route path="/payment">
<Payment/>
</Route>
<Route path="/C">
<C/>
</Route>
<Route path="/B">
<B />
</Route>
<Route path="/A">
<A />
</Route>
<Route path="/">
<Home />
</Route>
</Switch>
</Router>
</div>
</div>
);
}
export default App;
Home Component
import React from 'react'
import {
BrowserRouter as Router,
NavLink
} from "react-router-dom";
function Home() {
return (
<div className='ml-20'>
<nav className='bg-red-50 max-w-full'>
<ul >
<li>
<Link to="/A">A-Class</Link>
</li>
<li>
<Link to="/B">B-Class</Link>
</li>
<li>
<Link to="/C">C-Class</Link>
</li>
</ul>
</nav>
</div>
)
}
export default Home
解决方案
You should probably change your route to one with a parameter
<Route path="/payment/:dataId" component={Payment}></Route>
and convert the button
to a Link
which also passes the id
<Link
to={`/payment/${postData.id}`}
and in the Payment
component
- also include access to the
data.json
- get the url parameter from the props
- use the provided parameter to find the relevant item in the data
Something like this: https://codesandbox.io/s/festive-spence-bw18s?file=/src/App.js
这篇关于从 json 呈现特定内容的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!