Props trong React: Khái niệm, cách dùng và ví dụ thực tế

Khi bắt đầu hành trình chinh phục React, có lẽ một trong những khái niệm đầu tiên và quan trọng nhất bạn gặp phải chính là Props. Vậy props là gì? Tại sao chúng lại đóng vai trò nền tảng trong việc xây dựng ứng dụng React?

Bài viết này sẽ giải mã tất cả những gì bạn cần biết về props, từ khái niệm cơ bản, cách hoạt động, cho đến những kỹ thuật nâng cao và best practices. Dù bạn là người mới toanh hay đã có kinh nghiệm, hãy cùng khám phá nhé!

Props là gì? Hiểu đơn giản qua một phép nhân hóa 🤷‍♂️

Hãy tưởng tượng bạn có các component trong React như những người khác nhau. Để họ có thể tương tác và làm việc cùng nhau, họ cần trao đổi thông tin. Props (viết tắt của "properties") chính là những "món quà" hay "thông tin" mà một component cha (parent component) gửi cho component con (child component).

Một cách kỹ thuật hơn, props là một đối tượng (object) chứa các thuộc tính chỉ đọc (read-only) được truyền từ component cha xuống component con.

Điểm mấu chốt cần nhớ là: Props là bất biến (immutable). Component con chỉ có thể "đọc" props được gửi đến chứ không thể tự ý thay đổi chúng. Điều này giống như bạn nhận được một món quà đã được gói sẵn, bạn có thể sử dụng nó nhưng không thể thay đổi bản chất của món quà đó. Nguyên tắc này đảm bảo luồng dữ liệu một chiều (one-way data flow) trong React, giúp ứng dụng trở nên dễ dự đoán và gỡ lỗi hơn.

Tại sao Props lại quan trọng?

Props là trái tim của việc tái sử dụng và kết hợp component trong React. Chúng quan trọng vì những lý do sau:

1. Tái sử dụng Component (Reusability): Bạn có thể tạo ra một component chung (ví dụ: Button, Card, Avatar) và sử dụng nó ở nhiều nơi khác nhau trong ứng dụng chỉ bằng cách truyền vào các props khác nhau.

   • Ví dụ: Cùng một component Button có thể hiển thị chữ "Đăng nhập" với màu xanh, hoặc chữ "Hủy" với màu đỏ, tất cả chỉ nhờ vào việc thay đổi props text và color.

2. Luồng dữ liệu một chiều (Top-down Data Flow): Dữ liệu trong React chảy từ trên xuống dưới (từ cha xuống con). Props là phương tiện duy nhất để thực hiện luồng chảy này. Điều này tạo ra một kiến trúc vững chắc, nơi bạn có thể dễ dàng truy vết nguồn gốc của dữ liệu. Hãy hình dung nó như một dòng thác 💧, nước chỉ chảy theo một hướng.

3. Tách biệt và chuyên môn hóa: Props cho phép component con tập trung vào nhiệm vụ của mình (hiển thị giao diện) mà không cần quan tâm dữ liệu đến từ đâu. Component cha chịu trách nhiệm về logic và cung cấp dữ liệu.

Cách hoạt động của Props: Từ truyền đến nhận

Quá trình làm việc với props gồm hai bước chính: truyền props từ cha và nhận props ở con.

1. Truyền Props (Passing Props)

Việc truyền props trông rất giống với cách bạn thêm thuộc tính cho một thẻ HTML.

Giả sử chúng ta có một component UserProfile và muốn hiển thị lời chào.

// Trong component cha (ví dụ: App.js)

import React from 'react'
import UserProfile from './UserProfile'

function App() {
  return (
    <div>
      {/* Truyền props 'name' và 'age' vào component UserProfile */}
      <UserProfile name="Alice" age={25} />
      <UserProfile name="Bob" age={30} />
    </div>
  )
}

export default App

Trong ví dụ trên, name="Alice" và age={25} chính là các props đang được truyền vào component UserProfile. Lưu ý, props có thể là bất kỳ kiểu dữ liệu nào trong JavaScript: chuỗi, số, mảng, đối tượng, hàm,...

2. Nhận và Sử dụng Props (Receiving and Using Props)

Component con sẽ nhận các props này dưới dạng một đối tượng.

Đối với Function Component (cách hiện đại và phổ biến):

Bạn có thể nhận props như một tham số của hàm. Kỹ thuật "destructuring" thường được sử dụng để code sạch hơn.

// Trong component con (UserProfile.js)

import React from 'react'

// Cách 1: Nhận cả object props
function UserProfile(props) {
  return (
    <div>
      <h1>Chào mừng, {props.name}!</h1>
      <p>Tuổi của bạn là: {props.age}</p>
    </div>
  )
}

export default UserProfile

// Trong component con (UserProfile.js)

import React from 'react'

// Cách 2: Dùng destructuring để lấy trực tiếp giá trị (khuyên dùng)
function UserProfile({ name, age }) {
  return (
    <div className="user-profile">
      <h1>Chào mừng, {name}!</h1>
      <p>Tuổi của bạn là: {age}</p>
    </div>
  )
}

export default UserProfile

Đối với Class Component (cách cũ hơn):

Props được truy cập thông qua this.props.

import React from 'react'

class UserProfile extends React.Component {
  render() {
    return (
      <div className="user-profile">
        <h1>Chào mừng, {this.props.name}!</h1>
        <p>Tuổi của bạn là: {this.props.age}</p>
      </div>
    )
  }
}

export default UserProfile

Props vs. State: Cuộc đối đầu kinh điển ⚔️

Người mới bắt đầu thường nhầm lẫn giữa Props và State. Đây là hai khái niệm cốt lõi nhưng có mục đích hoàn toàn khác nhau.

Quy tắc vàng: Nếu một component cần thay đổi dữ liệu của chính nó (ví dụ: bộ đếm, nội dung ô input, trạng thái đóng/mở), hãy dùng State. Nếu một component chỉ cần hiển thị dữ liệu nhận từ bên ngoài, hãy dùng Props.

Các loại Props đặc biệt và Best Practices ✅

Để sử dụng props một cách chuyên nghiệp, bạn nên biết thêm về các kỹ thuật sau:

1. children prop

Đây là một prop đặc biệt cho phép bạn lồng các component hoặc JSX vào bên trong một component khác. Bất cứ thứ gì bạn đặt giữa thẻ mở và thẻ đóng của component sẽ được truyền vào như props.children.

// Component Card.js
function Card({ children }) {
  return <div className="card">{children}</div>
}

// Sử dụng trong App.js
;<Card>
  {/* Toàn bộ phần này chính là props.children của Card */}
  <h2>Tiêu đề bài viết</h2>
  <p>Đây là nội dung bên trong Card component.</p>
</Card>

2. defaultProps

Giúp bạn định nghĩa giá trị mặc định cho props phòng trường hợp chúng không được truyền từ component cha.

function Button({ color, text }) {
  return <button style={{ backgroundColor: color }}>{text}</button>
}

// Định nghĩa giá trị mặc định
Button.defaultProps = {
  color: 'gray',
  text: 'Click Me',
}

// <Button /> sẽ có màu xám và chữ "Click Me"
// <Button color="blue" text="Submit" /> sẽ ghi đè giá trị mặc định

3. PropTypes

Để đảm bảo code vững chắc và dễ bảo trì, bạn nên kiểm tra kiểu dữ liệu của props. PropTypes giúp bạn cảnh báo lỗi nếu một prop được truyền vào với sai kiểu dữ liệu.

import PropTypes from 'prop-types'

function UserProfile({ name, age, isVerified }) {
  // ...
}

// Định nghĩa kiểu dữ liệu cho props
UserProfile.propTypes = {
  name: PropTypes.string.isRequired, // Chuỗi, và là bắt buộc
  age: PropTypes.number, // Số, không bắt buộc
  isVerified: PropTypes.bool, // Kiểu boolean
}

Lời kết: Props là khái niệm quan trọng cần nắm vững

Việc nắm vững props không chỉ là một yêu cầu cơ bản mà còn là bước đệm quan trọng giúp bạn xây dựng các ứng dụng React phức tạp, có cấu trúc tốt và dễ dàng bảo trì. Hãy nhớ rằng: props là những "sứ giả" mang thông tin từ trên xuống, hoạt động theo nguyên tắc bất biến và là công cụ chính để tạo ra các component linh hoạt, có thể tái sử dụng.

Hy vọng bài viết này đã mang lại cho bạn một cái nhìn toàn diện và sâu sắc về props. Chúc bạn thành công trên con đường lập trình với React!