Hướng Dẫn Tạo Component React Tái Sử Dụng Với TypeScript

Trong quá trình phát triển ứng dụng React, bạn có thể đã gặp phải tình huống phải sao chép và dán một đoạn JSX cho một nút bấm hoặc thẻ card. Điều này có thể hoạt động, nhưng sớm thôi, bạn sẽ có mười nút bấm khác nhau chỉ với một chút khác biệt, và việc thay đổi một nút có thể khiến bạn phải thay đổi tất cả. Điều này thật phiền phức.

Hãy nghĩ về nó như LEGOs. Bạn không tạo ra một viên gạch mới mỗi khi cần một viên gạch 2x4. Bạn chỉ cần lấy một viên từ hộp. Các component tái sử dụng cũng giống như vậy. Chúng là những viên gạch LEGO của chúng ta để xây dựng giao diện. Và khi bạn thêm TypeScript, bạn đảm bảo rằng mỗi viên gạch chỉ kết nối ở những nơi mà nó nên có.

Hướng dẫn này sẽ chỉ cho bạn cách tạo các component đơn giản, tái sử dụng trong React với TypeScript. Không có thông tin thừa, chỉ là các bước thực tiễn.

Tại Sao Tính Tái Sử Dụng Quan Trọng

Việc viết mã có thể tái sử dụng là một cách để làm việc hiệu quả. Nó tuân theo nguyên tắc DRY (Don't Repeat Yourself). Thay vì viết cùng một kiểu dáng và logic của nút bấm ở năm nơi khác nhau, bạn chỉ cần viết một lần trong một component và sử dụng ở mọi nơi.

Lợi Ích Của Tính Tái Sử Dụng

• Dễ Dàng Bảo Trì: Cần thay đổi màu nút bấm? Bạn chỉ cần chỉnh sửa một tệp.
• Giao Diện Nhất Quán: Ứng dụng của bạn trông và cảm nhận giống nhau ở mọi nơi vì bạn đang sử dụng những thành phần cốt lõi giống nhau.
• Phát Triển Nhanh Hơn: Bạn phát triển nhanh hơn bằng cách tạo ra giao diện từ các component có sẵn thay vì bắt đầu từ đầu.

TypeScript thêm một lớp bảo vệ. Nó đảm bảo rằng bạn truyền dữ liệu đúng (props) đến các component, giúp phát hiện lỗi trước khi chúng xảy ra.

Ý Tưởng Cốt Lõi: Component Nút Bấm Đơn Giản

Hãy bắt đầu với một nút bấm cơ bản. Mục tiêu là tạo ra một component có thể nhận văn bản khác nhau và xử lý sự kiện click.

Trước tiên, chúng ta định nghĩa "hình dạng" của dữ liệu mà component của chúng ta mong đợi bằng cách sử dụng type hoặc interface trong TypeScript. Đây là các props của component.

// Button.tsx
import React from 'react';

type ButtonProps = {
  text: string;
  onClick: () => void; // Một hàm không nhận tham số và không trả giá trị
};

export const Button = ({ text, onClick }: ButtonProps) => {
  return (
    <button onClick={onClick} style={{ padding: '10px 20px', cursor: 'pointer' }}>
      {text}
    </button>
  );
};

Ở đây, ButtonProps cho chúng ta biết rằng component Button phải nhận một text (string) và một onClick (hàm).

Bây giờ, chúng ta có thể sử dụng nó ở bất kỳ đâu trong ứng dụng:

// App.tsx
import { Button } from './Button';

function App() {
  const handleSave = () => {
    console.log('Đã lưu!');
  };

  const handleCancel = () => {
    console.log('Đã hủy!');
  };

  return (
    <div>
      <Button text="Lưu Thay Đổi" onClick={handleSave} />
      <Button text="Hủy" onClick={handleCancel} />
    </div>
  );
}

Chúng ta vừa sử dụng cùng một component để tạo ra hai nút bấm khác nhau với văn bản và hành động khác nhau. Đơn giản và sạch sẽ.

Làm Cho Các Component Linh Hoạt Hơn

Một component tái sử dụng tốt là linh hoạt. Hãy thêm một số tính năng phổ biến.

Xử Lý Các Biến Thể Khác Nhau

Nếu bạn cần một nút bấm chính cho các hành động chính và một nút phụ cho những điều ít quan trọng hơn thì sao? Đây giống như một chiếc áo phông có nhiều màu sắc khác nhau. Chúng ta có thể thêm một prop variant.

Cập nhật ButtonProps để bao gồm một variant tùy chọn.

// Button.tsx

type ButtonProps = {
  text: string;
  onClick: () => void;
  variant?: 'primary' | 'secondary'; // Prop tùy chọn
};

export const Button = ({ text, onClick, variant = 'primary' }: ButtonProps) => {
  const style = {
    padding: '10px 20px',
    cursor: 'pointer',
    backgroundColor: variant === 'primary' ? 'blue' : 'gray',
    color: 'white',
    border: 'none',
  };

  return (
    <button onClick={onClick} style={style}>
      {text}
    </button>
  );
};

Chúng ta đã sử dụng một kiểu dữ liệu hợp nhất của TypeScript 'primary' | 'secondary' để hạn chế các giá trị có thể cho variant. Chúng ta cũng đặt giá trị mặc định là 'primary' trong component. Bây giờ chúng ta có thể dễ dàng kiểm soát cách hiển thị của nút.

// Sử dụng trong App.tsx
<Button text="Gửi" onClick={handleSubmit} variant="primary" />
<Button text="Tìm Hiểu Thêm" onClick={handleLearnMore} variant="secondary" />

Truyền Children Để Nội Dung

Đôi khi bạn cần nhiều hơn chỉ văn bản bên trong một component. Có thể bạn muốn một biểu tượng bên cạnh văn bản trong một nút bấm, hoặc nội dung phức tạp bên trong một Card. Đây là lý do tại sao prop children tồn tại.

Hãy xây dựng một component Card có thể bao bọc bất kỳ nội dung nào.

// Card.tsx
import React from 'react';

type CardProps = {
  children: React.ReactNode; // Kiểu đặc biệt này chấp nhận bất cứ thứ gì React có thể hiển thị
};

export const Card = ({ children }: CardProps) => {
  const style = {
    padding: '16px',
    border: '1px solid #ddd',
    borderRadius: '8px',
    boxShadow: '0 2px 4px rgba(0,0,0,0.1)',
  };

  return (
    <div style={style}>
      {children}
    </div>
  );
};

Bây giờ chúng ta có thể đặt bất kỳ nội dung nào bên trong thẻ card của chúng ta.

// App.tsx
import { Card } from './Card';

function App() {
  return (
    <Card>
      <h2>Chào Mừng!</h2>
      <p>Đây là một số nội dung bên trong component card tái sử dụng của chúng ta.</p>
      <Button text="Bắt Đầu" onClick={() => {}} />
    </Card>
  );
}

Mẹo Cuối Để Tạo Component Tái Sử Dụng Tuyệt Vời

1. Giữ chúng tập trung. Một component nên làm một việc tốt. Một component Button không nên lấy dữ liệu.
2. Định nghĩa props rõ ràng. Props của bạn là API của component. Hãy làm cho chúng dễ hiểu với TypeScript.
3. Tránh logic kinh doanh cụ thể. Một component tái sử dụng nên ngốc nghếch. Nó chỉ hiển thị những gì bạn cung cấp. Truyền các hàm dưới dạng props để xử lý logic.
4. Suy nghĩ về cấu trúc. Đừng xây dựng một component khổng lồ, tất cả trong một. Hãy xây dựng những component nhỏ, tập trung và kết hợp chúng lại với nhau.

Kết Luận

Xây dựng các component tái sử dụng không phải là một quyết định kiến trúc phức tạp; nó là một thói quen đơn giản. Nó liên quan đến việc suy nghĩ theo cách của những viên gạch LEGO thay vì những phần được chạm khắc riêng biệt. Bằng cách bắt đầu với những component đơn giản, định nghĩa rõ ràng các props với TypeScript và tập trung vào cấu trúc, bạn viết mã sạch hơn, dễ bảo trì hơn và nhanh hơn để xây dựng.