从 json 呈现特定内容 [英] Rendering specific Content from json

查看：42
本文介绍了从 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组件

像这样: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

Something like this: https://codesandbox.io/s/festive-spence-bw18s?file=/src/App.js

这篇关于从 json 呈现特定内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆