凡人练 React：抖音商城[商品信息卡组件]开发指南

1. 创建 React 项目

首先，我们需要创建一个 React 项目。我们可以使用 create-react-app 脚手架来快速创建一个项目。

npx create-react-app my-app

2. 创建组件

接下来，我们需要创建一个 React 组件。我们将把它命名为商品信息卡组件。

mkdir src/components
cd src/components
touch ProductCard.js

在 ProductCard.js 文件中，我们将编写组件的代码。

import React from 'react';

const ProductCard = ({ product }) => {
  return (
    <div className="product-card">
      <img src={product.image} alt={product.name} />
      <div className="product-info">
        <h4>{product.name}</h4>
        <p>{product.description}</p>
        <span>{product.price}</span>
      </div>
    </div>
  );
};

export default ProductCard;

3. 使用 props 来传递数据

接下来，我们需要使用 props 来将数据传递给组件。在抖音商城页面中，我们将把商品信息传递给组件。

import React from 'react';
import ProductCard from './components/ProductCard';

const App = () => {
  const products = [
    {
      id: 1,
      name: 'iPhone 13 Pro',
      description: 'The latest and greatest iPhone from Apple.',
      price: '$999',
      image: 'https://example.com/iphone-13-pro.jpg',
    },
    // ...
  ];

  return (
    <div className="App">
      {products.map((product) => (
        <ProductCard key={product.id} product={product} />
      ))}
    </div>
  );
};

export default App;

4. 处理事件

接下来，我们需要处理组件中的事件。在商品信息卡组件中，我们将处理点击事件，以便用户可以查看商品详情。

import React, { useState } from 'react';

const ProductCard = ({ product }) => {
  const [showDetails, setShowDetails] = useState(false);

  const handleClick = () => {
    setShowDetails(!showDetails);
  };

  return (
    <div className="product-card">
      <img src={product.image} alt={product.name} />
      <div className="product-info">
        <h4>{product.name}</h4>
        <p>{product.description}</p>
        <span>{product.price}</span>
      </div>
      <button onClick={handleClick}>查看详情</button>
      {showDetails && (
        <div className="product-details">
          {/* 商品详情 */}
        </div>
      )}
    </div>
  );
};

export default ProductCard;

5. 将组件集成到抖音商城页面中

最后，我们需要将组件集成到抖音商城页面中。我们将把它放在商品列表中。

import React from 'react';
import ProductCard from './components/ProductCard';

const App = () => {
  const products = [
    {
      id: 1,
      name: 'iPhone 13 Pro',
      description: 'The latest and greatest iPhone from Apple.',
      price: '$999',
      image: 'https://example.com/iphone-13-pro.jpg',
    },
    // ...
  ];

  return (
    <div className="App">
      <div className="product-list">
        {products.map((product) => (
          <ProductCard key={product.id} product={product} />
        ))}
      </div>
    </div>
  );
};

export default App;

6. 测试组件

最后，我们需要测试组件。我们可以使用 Jest 来测试组件。

// ProductCard.test.js
import React from 'react';
import { render, fireEvent } from '@testing-library/react';
import ProductCard from './ProductCard';

describe('ProductCard', () => {
  it('should render the product name', () => {
    const product = {
      id: 1,
      name: 'iPhone 13 Pro',
      description: 'The latest and greatest iPhone from Apple.',
      price: '$999',
      image: 'https://example.com/iphone-13-pro.jpg',
    };

    const { getByText } = render(<ProductCard product={product} />);

    expect(getByText('iPhone 13 Pro')).toBeInTheDocument();
  });

  it('should show the product details when the button is clicked', () => {
    const product = {
      id: 1,
      name: 'iPhone 13 Pro',
      description: 'The latest and greatest iPhone from Apple.',
      price: '$999',
      image: 'https://example.com/iphone-13-pro.jpg',
    };

    const { getByText, getByRole } = render(<ProductCard product={product} />);

    fireEvent.click(getByRole('button', { name: '查看详情' }));

    expect(getByText('商品详情')).toBeInTheDocument();
  });
});