在开发场景中,我们可能更加喜欢使用jsonp,这里从基本的json数据列举一个示例,让学习react的小伙伴知道如何做数据交互。
import React from 'react'
import { useParams, Link } from "react-router-dom";
import data from "../data.json";
function Payment() {
const { productId } = useParams();
const filteredData = data.filter((product) => product.id === productId)[0];
return (
<div className='Payment'>
<img src={filteredData.image}></img>
<h1>{filteredData.price}</h1>
<h1>{filteredData.name}</h1>
</div>
)
}
export default Payment
import React from 'react'
import data from "./data.json";
import {
Link
} from "react-router-dom";
import { SearchContext } from './SearchContext';
function FreeToPlay() {
const {filterProduct}=React.useContext(SearchContext);
return (
<>
<div className='All' >
{data[0].freetoplay.filter(filterProduct).map((product) => {
return (
<div className='f2p' key={product.id}>
<img src={product.image}></img>
<h2>{product.name}</h2>
<h5>{product.price}</h5>
<Link
to={`/payment/${product.id}`}
className='link'
>
Buy Now
</Link>
</div>
);
})}
</div>
</>
);
}
export default FreeToPlay
json
[
{
"freetoplay": [{
"id": "0",
"image": "src=fsdf",
"price": "60$",
"name": "CS Go"
},
{
"id": "1",
"image": "src=fsdf",
"price": "6$",
"name": "Fifa"
}
],
"action": [{
"id": "2",
"image": "src=fsdf",
"price": "60$",
"name": "doom"
},
{
"id": "3",
"image": "src=fsdf",
"price": "66$",
"name": "cyberpunk"
}
],
}
]
import React, { useState, useContext } from 'react';
export const SearchContext =React.createContext(null)
export default function SearchProvider({children}) {
const [searchValue, setSearchValue] = React.useState("");
function filterProduct(product) {
return product.name.toLowerCase().includes(searchValue.toLowerCase());
}
return(
<SearchContext.Provider value ={{filterProduct, searchValue, setSearchValue}}>
{children}
</SearchContext.Provider>
); }
function Routes() {
return (
<div>
<Router>
<SideBar />
<Switch>
<Route path="/payment/:productId">
<Payment/>
</Route>
<Route path="/freetoplay">
<FreeToPlay />
</Route>
<Route path="/action">
<Action />
</Route>
</Switch>
</Router>
</div>
)
}
export default Routes