使用react实现一个购物车功能

以下是一个简单的购物车功能的实现：

1. 创建一个商品组件，包括商品名称、价格、图片等信息，并提供一个添加到购物车的按钮。

import React from 'react';

const Product = ({ name, price, image, onAddToCart }) => {
return (
<div className="product">
<img src={image} alt={name} />
<h2>{name}</h2>
<p>{price}</p>
<button onClick={onAddToCart}>Add to Cart</button>
</div>
);
};

export default Product;

2. 创建一个购物车组件，包括购物车中的商品列表和总价。

import React from 'react';

const ShoppingCart = ({ cartItems }) => {
const totalPrice = cartItems.reduce((total, item) => total + item.price, 0);

return (
<div className="shopping-cart">
<h2>Shopping Cart</h2>
<ul>
{cartItems.map(item => (
<li key={item.id}>
{item.name} - {item.price}
</li>
))}
</ul>
<p>Total Price: {totalPrice}</p>
</div>
);
};

export default ShoppingCart;

3. 创建一个App组件，包括商品列表和购物车组件，并处理添加到购物车的逻辑。

import React, { useState } from 'react';
import Product from './Product';
import ShoppingCart from './ShoppingCart';

const App = () => {
const [cartItems, setCartItems] = useState([]);

const handleAddToCart = (product) => {
setCartItems([...cartItems, product]);
};

return (
<div className="app">
<div className="product-list">
<Product
name="Product 1"
price="10.00"
image="https://via.placeholder.com/150"
onAddToCart={() => handleAddToCart({ id: 1, name: 'Product 1', price: 10 })}
/>
<Product
name="Product 2"
price="20.00"
image="https://via.placeholder.com/150"
onAddToCart={() => handleAddToCart({ id: 2, name: 'Product 2', price: 20 })}
/>
<Product
name="Product 3"
price="30.00"
image="https://via.placeholder.com/150"
onAddToCart={() => handleAddToCart({ id: 3, name: 'Product 3', price: 30 })}
/>
</div>
<ShoppingCart cartItems={cartItems} />
</div>
);
};

export default App;

这样就可以通过点击商品的添加到购物车按钮将商品加入购物车，并在购物车中显示出来。