从 json 呈现特定内容

IT技术 javascript json reactjs react-router
2021-05-01 06:44:43

所以，你好我的问题是这个。我有一个 C 类组件，它是位于 data.json 中的“映射内容”，稍后我将添加更多内容，但是，在 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
2个回答

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

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

并转换button到Link这也传递ID

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

并在Payment组件中

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

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

您可以传递附加数据history.push并从Payment页面中的props中获取它。

在您的 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

在您的 Payment 组件中，您可以通过这种方式拉出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;
其它你可能感兴趣的问题
上一篇减少函数 React 中的重复状态 下一篇ReactJS - 按钮不会在状态更改时重新呈现？