Props trong React là gì?

Props trong React là một cơ chế để truyền dữ liệu từ một component cha sang một component con trong ứng dụng React. Props (viết tắt của "properties") là các đối số mà bạn cung cấp cho một component React và chúng là read-only, tức là không thể được thay đổi bởi component nhận props.

Đặc điểm của Props

• Read-only: Props không thể được thay đổi bởi component nhận chúng. Nếu bạn cần thay đổi dữ liệu, bạn sẽ cần sử dụng state.
• Truyền dữ liệu: Props cho phép bạn truyền dữ liệu từ component cha xuống component con, giúp tạo ra các component có thể tái sử dụng và tùy chỉnh.
• Truyền hàm: Ngoài dữ liệu, props cũng có thể được sử dụng để truyền hàm từ component cha xuống component con, cho phép các component con giao tiếp với component cha hoặc thực hiện các hành động khi được kích hoạt.

Ví dụ về Props

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

function App() {
  return <Welcome name="Alice" />;
}

Trong ví dụ trên, component Welcome nhận props và sử dụng nó để hiển thị tên. Component App truyền một prop name với giá trị "Alice" đến component Welcome.

Lợi ích của Props

• Tái sử dụng component: Props giúp bạn tạo ra các component có thể tái sử dụng với dữ liệu khác nhau mà không cần phải viết lại code.
• Tổ chức code: Props giúp bạn tổ chức code một cách rõ ràng, với một luồng dữ liệu từ trên xuống dễ theo dõi.
• Tách biệt logic: Bằng cách sử dụng props, bạn có thể tách biệt logic của component cha và con, giúp code dễ bảo trì và mở rộng hơn.

Tóm lại, props là một phần quan trọng của React, giúp xây dựng các ứng dụng có cấu trúc tốt và dễ quản lý.