如何动态地改变一个页面中的元素？

Question

我目前正在一个反应/打字的网络商店工作，我有一个问题。我有一个包含所有产品信息的JSON文件，我有两个组件(页面) Home和Product。在主页上，我用products导入了一个JSON文件，在map方法的帮助下，我以一个link元素的形式创建了每个产品，每个链接都指向一个包含产品详细信息的。我有8个产品，我可以创建8个不同的页面，每个产品都有自己的页面，但我更愿意为所有产品创建一个页面，有8个产品，有8个不同的页面并不可怕，但假设有1000个产品，是否可以在主页上点击不同的产品，页面上的内容随着产品详细信息(产品组件)的动态变化。

这是我的items.JSON：

[{
"id": 1,
"name": "Earphones",
"price": 49,
"imgUrl": "/images/earphones1.webp"},
{
"id": 2,
"name": "Earphones 2",
"price": 69,
"imgUrl": "/imgs/earphones2.webp"},
{
"id": 3,
"name": "Earphones 3",
"price": 59,
"imgUrl": "/imgs/earphones3.webp"},
{
"id": 4,
"name": "Earphones 4",
"price": 79,
"imgUrl": "/imgs/earphones4.webp"},
{
"id": 5,
"name": "Earphones 5",
"price": 79,
"imgUrl": "/imgs/earphones5.webp"},
{
"id": 6,
"name": "Speaker",
"price": 89,
"imgUrl": "/imgs/speaker.webp"},
{
"id": 7,
"name": "Watch",
"price": 199,
"imgUrl": "/imgs/watch.webp"},
{
"id": 8,
"name": "Watch2",
"price": 299,
"imgUrl": "/imgs/watch2.webp"}]

这是我的Home.tsx：

import items from '../data/items.json'
import "../style/style.css"
import { Link } from 'react-router-dom';

export function Home(){
return (
  <div>
    <div
      style={{
        display: "flex",
        flexWrap: "wrap",
        justifyContent: "center",
        gap: "20px",
      }}
    >
      {items.map((item) => (
        <Link
          key={item.id}
          style={{
            textDecoration: "none",
            color: "black",
          }}
          to={"/product"}
        >
          <div className="product-container">
            <div
              style={{
                backgroundColor: "#e9ecef",
                borderRadius: "20px",
                padding: "10px",
              }}
            >
            
            <img src={item.imgUrl} style={{}} width="250px" alt="" />
          </div>
          <div
            style={{
              display: "flex",
              flexDirection: "column",
              paddingInline: "20px",
              fontFamily: "fantasy",
              fontSize: "18px",
              fontWeight: "lighter",
            }}
          >
            <p style={{ color: "gray" }}>{item.name}</p>
            <p
              style={{
                transform: "translateY(-30px)",
                fontWeight: "bolder",
                fontFamily: "cursive",
              }}
            >
              ${item.price}
            </p>
          </div>
        </div>
      </Link>
    ))}
  </div>
</div>

)；}

这是我的Product.tsx：

import items from '../../data/items.json'
import '../../style/style.css'
import {
  AiFillStar,
  AiOutlineStar,
  AiOutlineMinus,
  AiOutlinePlus,
} from "react-icons/ai";

export function Product(){
  return (
    <div style={{ display: "grid", placeContent: "center" }}>
      <div
        style={{
          display: "flex",
          flexWrap: "wrap",
          gap: "20px",
        }}
      >
        <div
          className="product-details-container"
          style={{
            display: "flex",
            fontFamily: "monospace",
            flexDirection: "column",
            fontSize: "25px",
            padding: "10px",
            borderRadius: "10px",
          }}
        >
          <img src={items[0].imgUrl} width="300px" alt="" />
        </div>
        <div style={{display: 'flex', flexDirection: 'column'}}>
          <p
            style={{
              fontFamily: "monospace",
              width: "300px",
              textAlign: "left",
              fontSize: "20px",
              color: "#22223b",
            }}
          >
            {items[0].name}
          </p>
          <div
            style={{ color: "#ba181b", display: "flex", alignItems: "center" }}
          >
            <AiFillStar />
            <AiFillStar />
            <AiFillStar />
            <AiFillStar />
            <AiOutlineStar />
            <p style={{ marginLeft: "5px", color: "#22223b" }}>(20)</p>
          </div>
          <p style={{fontFamily: 'monospace', fontSize: '20px'}}>${items[0].price}</p>
          <div
            style={{
              fontFamily: "monospace",
              color: "#22223b",
              fontSize: "17px",
            }}
          >
            <p>Details:</p>
            <p>Cool headphones, amazing sound.</p>
          </div>
          <div
            style={{
              display: "flex",
              alignItems: "center",
              fontFamily: "monospace",
              fontSize: "16px",
            }}
          >
            <p style={{ marginRight: "20px" }}>Quantity:</p>
            <button
              style={{
                background: "transparent",
                border: "1px solid grey",
                display: "grid",
                placeContent: "center",
                paddingInline: "20px",
                height: "50px",
              }}
            >
              <AiOutlineMinus />
            </button>
            <p
              style={{
               background: "transparent",
            border: "1px solid grey",
            display: "grid",
            placeContent: "center",
            paddingInline: "15px",
            height: "48px",
          }}
        >
          0
        </p>
        <button
          style={{
            background: "transparent",
            border: "1px solid grey",
            display: "grid",
            placeContent: "center",
            paddingInline: "20px",
            height: "50px",
          }}
        >
          <AiOutlinePlus />
        </button>
      </div>
      <button
        style={{
          background: "transparent",
          border: "1px solid darkred",
          color: "darkred",
          padding: '10px',
          fontFamily: 'monospace',
          fontSize: '17px',
          width: '150px',
          alignSelf: 'center'
        }}
      >
        Add to Cart
      </button>
    </div>
  </div>
</div>
  );
}

在产品组件中，我从同一个JSON获得的所有产品细节。

Answer 1

这不是一种将数据从一条路由传递到另一条路径的好方法。See this link。

无论如何，我为您做了一个可运行的代码，它将把一个项目对象传递到“产品”页面。

​

import { Link } from 'react-router-dom'

export interface Item {
  id: number
  name: string
  price: number
  imgUrl: string
}

const items: Item[] = [
  {
    id: 1,
    name: 'Earphones',
    price: 49,
    imgUrl: '/images/earphones1.webp',
  },
  {
    id: 2,
    name: 'Earphones 2',
    price: 69,
    imgUrl: '/imgs/earphones2.webp',
  },
  {
    id: 3,
    name: 'Earphones 3',
    price: 59,
    imgUrl: '/imgs/earphones3.webp',
  },
  {
    id: 4,
    name: 'Earphones 4',
    price: 79,
    imgUrl: '/imgs/earphones4.webp',
  },
  {
    id: 5,
    name: 'Earphones 5',
    price: 79,
    imgUrl: '/imgs/earphones5.webp',
  },
  {
    id: 6,
    name: 'Speaker',
    price: 89,
    imgUrl: '/imgs/speaker.webp',
  },
  {
    id: 7,
    name: 'Watch',
    price: 199,
    imgUrl: '/imgs/watch.webp',
  },
  {
    id: 8,
    name: 'Watch2',
    price: 299,
    imgUrl: '/imgs/watch2.webp',
  },
]

function Home() {
  return (
    <div
      key={'App-1'}
      style={{
        display: 'flex',
        flexWrap: 'wrap',
        justifyContent: 'center',
        gap: '20px',
      }}
    >
      {items.map((item, index) => (
        <Link
          key={`${index}-${item.id}`}
          style={{
            textDecoration: 'none',
            color: 'black',
          }}
          to={{
            pathname: `/product`,
            search:  JSON.stringify(item)
          }}
        >
         // our code ....
        </Link>
      ))}
    </div>
  )
}

export default App

​

这是你修改过的Product.tsx页面。

从“react路由器-dom”导入{ useSearchParams }，从“./App”导入{ Item }；

export function Product(){ 
    const [searchParam] = useSearchParams();
    let item = {} as Item;

    const data = Array.from(searchParam.keys());
    if(data.length > 0) {
        item= JSON.parse(data[0]);
    }
    return (<div>
        {
            item && item.id &&  <h1> {item.name}</h1>
            // Your code
        }
    </div>)
}