要在ReactJs组件中显示的产品数据的动态切片数组

import React from 'react';

const ProductList = ({ products }) => {
  return (
    <div>
      {products.map((product) => (
        <div key={product.id}>
          <h3>{product.name}</h3>
          <p>{product.description}</p>
          <p>Price: {product.price}</p>
        </div>
      ))}
    </div>
  );
};

const ProductContainer = () => {
  // 假设这是从后端获取的产品数据数组
  const allProducts = [
    { id: 1, name: 'Product 1', description: 'Description 1', price: 10 },
    { id: 2, name: 'Product 2', description: 'Description 2', price: 20 },
    { id: 3, name: 'Product 3', description: 'Description 3', price: 30 },
    // 更多产品...
  ];

  // 根据需要切片的数量，这里假设只显示前两个产品
  const slicedProducts = allProducts.slice(0, 2);

  return <ProductList products={slicedProducts} />;
};

export default ProductContainer;