如何在购物车应用前端为View Items页面添加组件？

第一步：抽离通用组件，干掉重复代码 #

先把两个组件里重复的商品展示部分（比如商品卡片、基础信息渲染）抽成独立的ProductCard组件，避免冗余代码：

// src/components/ProductCard/ProductCard.jsx
import './ProductCard.css';

const ProductCard = ({ product }) => {
  return (
    <div className="product-card">
      <img src={product.imageUrl} alt={product.name} className="product-img" />
      <h3 className="product-name">{product.name}</h3>
      <p className="product-price">${product.price.toFixed(2)}</p>
      <p className="product-desc">{product.description}</p>
    </div>
  );
};

export default ProductCard;

第二步：写独立的ViewItems组件，只做商品查看 #

基于刚才的通用组件，写一个纯展示的ViewItems组件，完全去掉购买相关的逻辑（比如加购按钮、数量控制）：

// src/components/ViewItems/ViewItems.jsx
import ProductCard from '../ProductCard/ProductCard';
import './ViewItems.css';
// 假设你有工具函数或者状态管理来获取商品列表
import { getProductList } from '../../utils/productUtils';

const ViewItems = () => {
  // 实际项目里可能用useState从API拉数据，或者用useSelector从Redux/Zustand取
  const products = getProductList();

  return (
    <div className="view-items-container">
      <h2 className="page-title">全部商品</h2>
      <div className="products-grid">
        {products.map(product => (
          <ProductCard key={product.id} product={product} />
        ))}
      </div>
    </div>
  );
};

export default ViewItems;

配套的CSS（ViewItems.css）：

.view-items-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem;
}

.page-title {
  text-align: center;
  margin-bottom: 2rem;
}

.products-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.5rem;
}

第三步：把ViewItems组件做成页面，配置路由 #

把ViewItems包装成页面组件，然后通过React Router配置访问路径：

// src/pages/ViewItemsPage.jsx
import ViewItems from '../components/ViewItems/ViewItems';

const ViewItemsPage = () => {
  return <ViewItems />;
};

export default ViewItemsPage;

路由配置文件（比如src/routes.js）：

import { Routes, Route } from 'react-router-dom';
import ViewItemsPage from './pages/ViewItemsPage';
import PurchasePage from './pages/PurchasePage'; // 你原来的购买页面
import HomePage from './pages/HomePage';

const AppRoutes = () => {
  return (
    <Routes>
      <Route path="/" element={<HomePage />} />
      <Route path="/view-items" element={<ViewItemsPage />} />
      <Route path="/purchase" element={<PurchasePage />} />
    </Routes>
  );
};

export default AppRoutes;

最后在App.js里引入路由：

import { BrowserRouter } from 'react-router-dom';
import AppRoutes from './routes';

function App() {
  return (
    <BrowserRouter>
      <AppRoutes />
    </BrowserRouter>
  );
}

export default App;

第四步：优化原来的Purchase组件 #

现在Purchase组件可以直接复用ProductCard，只保留购买相关的逻辑就行：

// src/components/Purchase/Purchase.jsx
import ProductCard from '../ProductCard/ProductCard';
import './Purchase.css';
import { useCart } from '../../contexts/CartContext'; // 假设你用购物车上下文管理状态

const Purchase = () => {
  const { addToCart } = useCart();
  const products = getProductList();

  const handleAddToCart = (product) => {
    addToCart(product);
  };

  return (
    <div className="purchase-container">
      <h2 className="page-title">选购商品</h2>
      <div className="products-grid">
        {products.map(product => (
          <div key={product.id} className="purchase-product-card">
            <ProductCard product={product} />
            <button onClick={() => handleAddToCart(product)} className="add-to-cart-btn">
              加入购物车
            </button>
          </div>
        ))}
      </div>
    </div>
  );
};

export default Purchase;

这样一来，ViewItems组件只负责展示商品，Purchase组件负责选购加购，完全拆分了职责，同时通过通用组件消除了代码重复，符合React的组件复用原则。

内容的提问来源于stack exchange，提问作者it20001216 Lukshithan K. H. K.