使用react挂钩将产品组件添加到篮子中

import React, { useState } from 'react';

const Basket = () => {
  const [basket, setBasket] = useState([]);

  return (
    <div>
      <h2>Basket</h2>
      {basket.map((product, index) => (
        <div key={index}>{product.name}</div>
      ))}
    </div>
  );
};

export default Basket;

import React, { useState } from 'react';

const Product = ({ name }) => {
  const [addedToBasket, setAddedToBasket] = useState(false);

  const handleAddToBasket = () => {
    setAddedToBasket(true);
    // 将产品添加到篮子中的逻辑
  };

  return (
    <div>
      <h3>{name}</h3>
      {addedToBasket ? (
        <p>Added to basket</p>
      ) : (
        <button onClick={handleAddToBasket}>Add to basket</button>
      )}
    </div>
  );
};

export default Product;

import React from 'react';
import Basket from './Basket';
import Product from './Product';

const App = () => {
  return (
    <div>
      <h1>Product List</h1>
      <Product name="Product 1" />
      <Product name="Product 2" />
      <Product name="Product 3" />
      <Basket />
    </div>
  );
};

export default App;