1
import React from 'react';
2

3
// 定义组件属性类型
4
interface ButtonProps {
5
  text: string;
6
  onClick?: () => void;
7
  type?: 'primary' | 'secondary';
8
}
9

10
// 函数组件定义
11
const Button: React.FC<ButtonProps> = ({ text, onClick, type = 'primary' }) => {
12
  return (
13
    <button
14
      className={`btn btn-${type}`}
15
      onClick={onClick}
16
    >
17
      {text}
18
    </button>
19
  );
20
};
21

22
// 使用组件
23
const App: React.FC = () => {
24
  const handleClick = () => console.log('按钮点击');
25

26
  return (
27
    <div>
28
      <Button text="主要按钮" type="primary" onClick={handleClick} />
29
      <Button text="次要按钮" type="secondary" />
30
    </div>
31
  );
32
};
33

34
export default App;

1
import React, { Component } from 'react';
2

3
interface CounterProps {
4
  initialCount: number;
5
}
6

7
interface CounterState {
8
  count: number;
9
}
10

11
// 类组件定义
12
class Counter extends Component<CounterProps, CounterState> {
13
  // 初始化状态
14
  constructor(props: CounterProps) {
15
    super(props);
16
    this.state = { count: props.initialCount };
17
  }
18

19
  // 定义方法
20
  increment = () => {
21
    this.setState({ count: this.state.count + 1 });
22
  };
23

24
  // 渲染UI
25
  render() {
26
    return (
27
      <div>
28
        <p>计数：{this.state.count}</p>
29
        <button onClick={this.increment}>加1</button>
30
      </div>
31
    );
32
  }
33
}
34

35
// 使用组件
36
const App: React.FC = () => {
37
  return <Counter initialCount={0} />;
38
};
39

40
export default App;

1
import React from 'react';
2
import { Image, Tag } from 'antd'; // 假设使用Ant Design组件库
3

4
// 定义商品卡片属性类型
5
interface ProductCardProps {
6
  id: string;
7
  name: string;
8
  price: number;
9
  imgUrl: string;
10
  isDiscount: boolean;
11
  discountRate?: number;
12
  onAddCart: (id: string) => void;
13
}
14

15
// 商品卡片组件
16
const ProductCard: React.FC<ProductCardProps> = ({
17
  id,
18
  name,
19
  price,
20
  imgUrl,
21
  isDiscount,
22
  discountRate,
23
  onAddCart,
24
}) => {
25
  // 计算折扣后价格
26
  const finalPrice = isDiscount && discountRate ? price * (1 - discountRate / 100) : price;
27

28
  return (
29
    <div className="product-card" style={{ border: '1px solid #eee', padding: 16, width: 240 }}>
30
      <Image src={imgUrl} alt={name} width={240} height={180} />
31
      <h3 style={{ fontSize: 16, margin: '8px 0' }}>{name}</h3>
32
      <div style={{ display: 'flex', alignItems: 'center', margin: '8px 0' }}>
33
        <span style={{ color: 'red', fontSize: 18 }}>¥{finalPrice.toFixed(2)}</span>
34
        {isDiscount && (
35
          <Tag color="red" style={{ marginLeft: 8 }}>
36
            {discountRate}折
37
          </Tag>
38
        )}
39
        {isDiscount && (
40
          <span style={{ marginLeft: 8, color: '#999', textDecoration: 'line-through' }}>
41
            ¥{price.toFixed(2)}
42
          </span>
43
        )}
44
      </div>
45
      <button
46
        className="add-cart-btn"
47
        style={{ width: '100%', padding: 8, background: '#0088ff', color: '#fff', border: 'none', borderRadius: 4 }}
48
        onClick={() => onAddCart(id)}
49
      >
50
        加入购物车
51
      </button>
52
    </div>
53
  );
54
};
55

56
// 批量渲染商品列表
57
const ProductList: React.FC = () => {
58
  // 模拟商品数据
59
  const products = [
60
    { id: '1', name: 'iPhone 15', price: 5999, imgUrl: '/images/iphone15.jpg', isDiscount: true, discountRate: 10 },
61
    { id: '2', name: '华为Mate 60', price: 4999, imgUrl: '/images/mate60.jpg', isDiscount: false },
62
  ];
63

64
  // 加入购物车逻辑
65
  const handleAddCart = (id: string) => {
66
    console.log(`商品${id}加入购物车`);
67
    // 实际业务中可调用接口、更新redux状态等
68
  };
69

70
  return (
71
    <div style={{ display: 'flex', gap: 16, padding: 20 }}>
72
      {products.map(product => (
73
        <ProductCard key={product.id} {...product} onAddCart={handleAddCart} />
74
      ))}
75
    </div>
76
  );
77
};
78

79
export default ProductList;