呈现来自json的特定内容

Question

你好，我的问题是这个。我有一个C类组件，它位于data.json中，它是“映射内容”，我稍后会添加更多的内容，但是，在C类中，我有一个按钮正在按下支付页面，我希望当按下按钮时，它只将内容(图像、价格、类)呈现到支付页面中，在那里我可以再次将其样式化，这基本上就是它。提前谢谢

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类组件

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组件

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;

家庭组件

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

Answer 1

您可能应该将路由更改为带有参数的路由。

<Route path="/payment/:dataId" component={Payment}></Route>

并将button转换为Link，后者也传递id。

<Link
  to={`/payment/${postData.id}`}

在Payment组件中

data.json

• get还包括对
• 的访问，
  • 中的url参数使用提供的参数在data

  中查找相关项。

就像这样：https://codesandbox.io/s/festive-spence-bw18s?file=/src/App.js

Answer 2

您可以使用history.push传递其他数据，并从Payment页面中的道具中获取数据。

在您的C组件中：

import React from 'react'
import data from './data.json'
import { useHistory } from 'react-router'
function C() {

  let history = useHistory();

  function handleClick(postData) {
    // Pass additional data to Payment component when changing route.
    history.push({
      pathname: '/payment',
      state: {
        price: postData.price,
        image: postData.image,
        class: postData.class
      }
    });
  }

  return (
    <div  >
      {data.map((postData) => {
        console.log(postData)
        return (
          <div key=
            {postData.id}>
            <div className='absolute '>
              {/** pass postData to handleClick function */}
              <button onClick={() => handleClick(postData)} 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

在您的支付组件中，您可以这样拔出price、image和class：

import React from 'react';
import { useLocation } from "react-router-dom";

const Payment = () => {
  // ... 
  const location = useLocation();

  console.log(location.state.image) // image url from C
  console.log(location.state.class) // class from C
  console.log(location.state.price) // price from C

  // ... 
}

export default Payment;