从 json 渲染特定内容

Question

所以，你好我的问题是这样的。我有一个位于 data.json 中的“映射内容”的 C 类组件，稍后我将添加更多内容，但是在 C 类中，我有一个按钮，当前正在将我推到支付页面，我想要按钮被按下，它只将 json 中的内容（图像、价格、类）呈现到支付页面中，我可以在其中再次设置它的样式，基本上就是这样。提前致谢

数据.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

应用组件

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

您可以使用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;

Answer 2

您可能应该将您的路线更改为带参数的路线

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

并将button 转换为Link，该Link 也传递了id

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

在Payment 组件中

• 还包括访问data.json
• 从props中获取url参数
• 使用提供的参数在数据中查找相关项

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