Prop trong ReactJS là gì?

Prop là gì? Prop là viết tắt của "property" (thuộc tính), đây là một khái niệm cốt lõi trong ReactJS. Prop là cơ chế cho phép truyền dữ liệu từ component cha xuống component con, tạo nên tính linh hoạt và khả năng tái sử dụng cao cho các thành phần giao diện.

Đặc điểm quan trọng nhất của prop là tính readonly (chỉ đọc). Điều này có nghĩa là component con có thể sử dụng dữ liệu từ prop, nhưng không được phép sửa đổi giá trị của chúng. Quy tắc này đảm bảo tính nhất quán của dữ liệu trong ứng dụng React.

Prop là gì khi xét về ý nghĩa trong kiến trúc ứng dụng? Đó chính là yếu tố then chốt giúp tái sử dụng component một cách linh hoạt với nhiều ngữ cảnh khác nhau, đồng thời kiểm soát luồng dữ liệu một chiều - một trong những triết lý thiết kế quan trọng của React. Khi dữ liệu chỉ di chuyển theo một hướng từ trên xuống, ứng dụng trở nên dễ dự đoán và dễ debug hơn.

Prop là viết tắt của "property" (thuộc tính), đây là một khái niệm cốt lõi trong ReactJS

Cách sử dụng prop trong ReactJS

Để làm việc hiệu quả với React, việc hiểu rõ cách truyền và sử dụng prop là vô cùng quan trọng. Cơ chế này tương đối đơn giản nhưng mạnh mẽ, cho phép dữ liệu "chảy" từ component cha xuống component con một cách có kiểm soát.

Truyền prop từ component cha

Cú pháp truyền prop trong React rất trực quan và dễ hiểu. Khi sử dụng một component, bạn chỉ cần thêm các thuộc tính vào thẻ JSX như cách bạn thêm thuộc tính vào thẻ HTML thông thường:

jsx

<Welcome name="Trang" age={25} isOnline={true} />

Trong ví dụ trên, chúng ta đã truyền ba prop: name (kiểu string), age (kiểu number) và isOnline (kiểu boolean) cho component Welcome. Lưu ý rằng giá trị chuỗi được đặt trong dấu ngoặc kép, trong khi các kiểu dữ liệu khác như số và boolean cần được đặt trong dấu ngoặc nhọn.

Truy cập prop trong component con

Sau khi được truyền, component con có thể truy cập các prop này một cách dễ dàng. Có hai cách chính để làm việc với prop trong component con:

Cách 1: Sử dụng tham số props

jsx

function Welcome(props) {

  return <h1>Hello, {props.name}. You are {props.age} years old.</h1>;

}

Cách 2: Sử dụng cú pháp destructuring (phân rã)

jsx

function Welcome({ name, age, isOnline }) {

  return (

    <div>

      <h1>Hello, {name}. You are {age} years old.</h1>

      <p>Status: {isOnline ? 'Online' : 'Offline'}</p>

    </div>

  );

}

Cú pháp destructuring giúp mã nguồn gọn gàng hơn, đặc biệt khi component nhận nhiều prop. Thay vì phải gõ props. mỗi khi cần truy cập một thuộc tính, bạn có thể sử dụng trực tiếp tên của thuộc tính đó.

Sau khi được truyền, component con có thể truy cập các prop này một cách dễ dàng

Các loại prop thường gặp

React rất linh hoạt trong việc cho phép truyền nhiều kiểu dữ liệu khác nhau qua props. Hiểu rõ các loại prop phổ biến sẽ giúp bạn thiết kế component linh hoạt và tái sử dụng cao.

Prop là kiểu dữ liệu đơn giản

Các kiểu dữ liệu cơ bản trong JavaScript đều có thể được truyền qua prop một cách dễ dàng. Điều này bao gồm:

• Chuỗi (string): <User name="John Doe" />
• Số (number): <Product price={99.99} />
• Boolean: <Toggle isActive={true} />
• Mảng (array): <TaskList items={['Task 1', 'Task 2']} />
• Đối tượng (object): <UserProfile user={{ name: 'John', age: 30 }} />

jsx

// Ví dụ truyền nhiều kiểu dữ liệu khác nhau

<UserCard

  name="John Doe"

  age={25}

  isVerified={true}

  hobbies={['Reading', 'Coding', 'Gaming']}

  address={{ city: 'Hanoi', country: 'Vietnam' }}

/>

 Truyền hàm qua props (callback function)

Một trong những ứng dụng mạnh mẽ của prop là khả năng truyền hàm giữa các component. Đây là cách để component con có thể giao tiếp ngược lại với component cha khi có sự kiện xảy ra.

jsx

// Component cha

function LoginForm() {

  const handleLogin = (username, password) => {

    console.log('Đang đăng nhập với:', username, password);

    // Xử lý logic đăng nhập

  };

  return <LoginButton onLogin={handleLogin} />;

}

// Component con

function LoginButton({ onLogin }) {

  return (

    <button onClick={() => onLogin('user123', 'password123')}>

      Đăng nhập

    </button>

  );

}

Trong ví dụ trên, component cha LoginForm truyền hàm handleLogin xuống component con LoginButton thông qua prop onLogin. Khi người dùng nhấn vào nút đăng nhập, component con sẽ gọi hàm callback này với các tham số thích hợp.

Prop đặc biệt: children

React cung cấp một prop đặc biệt có tên là children. Prop này cho phép bạn truyền nội dung giữa thẻ mở và thẻ đóng của một component, tương tự như cách bạn đặt nội dung bên trong thẻ HTML.

jsx

// Định nghĩa component Card

function Card({ title, children }) {

  return (

    <div className="card">

      <div className="card-header">{title}</div>

      <div className="card-body">{children}</div>

    </div>

  );

}

// Sử dụng component Card

function App() {

  return (

    <Card title="Thông báo quan trọng">

      <p>Đây là nội dung bên trong thẻ Card.</p>

      <button>Xác nhận</button>

    </Card>

  );

}

Prop children rất hữu ích khi bạn muốn tạo các component container có thể chứa nội dung tùy ý. Nó giúp tăng tính linh hoạt và khả năng tái sử dụng của component.

Bạn đọc tham khảo thêm: 

Authentication là gì? 5 phương pháp bảo mật hiệu quả nhất hiện nay

Elasticsearch là gì? Khái niệm, ứng dụng và cách sử dụng cơ bản

Kiểm tra kiểu dữ liệu của prop bằng PropTypes

Khi ứng dụng phát triển lớn hơn, việc đảm bảo rằng các component nhận đúng kiểu dữ liệu cho prop trở nên rất quan trọng. React cung cấp một cơ chế kiểm tra kiểu thông qua thư viện prop-types.

Để bắt đầu sử dụng PropTypes, bạn cần cài đặt thư viện:

bash

npm install prop-types

Sau đó, bạn có thể định nghĩa kiểu dữ liệu cho các prop của component:

jsx

import PropTypes from 'prop-types';

function User({ name, age, isActive, friends }) {

  return (

    <div>

      <h1>{name}</h1>

      <p>Age: {age}</p>

      <p>Status: {isActive ? 'Active' : 'Inactive'}</p>

      <p>Friends: {friends.join(', ')}</p>

    </div>

  );

}

User.propTypes = {

  name: PropTypes.string.isRequired,

  age: PropTypes.number,

  isActive: PropTypes.bool,

  friends: PropTypes.arrayOf(PropTypes.string)

};

// Bạn cũng có thể định nghĩa giá trị mặc định

User.defaultProps = {

  age: 25,

  isActive: false,

  friends: []

};

Trong ví dụ trên, chúng ta đã định nghĩa kiểu dữ liệu cho từng prop của component User. Thuộc tính .isRequired chỉ ra rằng prop name là bắt buộc phải có. Nếu không truyền đủ prop hoặc truyền sai kiểu dữ liệu, React sẽ hiển thị cảnh báo trong console khi ứng dụng chạy ở chế độ development.

Những lỗi thường gặp khi sử dụng props

Dù prop là gì có vẻ đơn giản, nhưng nhiều lập trình viên vẫn mắc phải các lỗi khi làm việc với chúng. Dưới đây là một số lỗi phổ biến và cách tránh:

• Quên truyền prop từ component cha: Điều này có thể dẫn đến lỗi undefined khi component con cố gắng truy cập prop. Giải pháp là luôn kiểm tra xem tất cả các prop cần thiết đã được truyền hay chưa, hoặc sử dụng PropTypes với .isRequired.
• Truyền sai kiểu dữ liệu: Ví dụ, truyền chuỗi khi component con mong đợi một số. Điều này có thể gây ra hành vi không mong muốn. Sử dụng PropTypes để kiểm tra kiểu dữ liệu.
• Gọi nhầm tên thuộc tính: Ví dụ, truyền userName nhưng trong component con lại truy cập props.username. JavaScript phân biệt chữ hoa chữ thường, vì vậy hãy đảm bảo tên prop được viết nhất quán.
• Không kiểm tra giá trị mặc định cho props: Khi một prop không được truyền, giá trị của nó là undefined. Hãy sử dụng defaultProps hoặc operator || để cung cấp giá trị mặc định.

jsx

function Greeting({ name }) {

  // Sử dụng toán tử || để cung cấp giá trị mặc định

  const displayName = name || 'Guest';

  return <h1>Hello, {displayName}!</h1>;

}

• Gán lại giá trị prop trong component con: Như đã đề cập, props là readonly. Cố gắng sửa đổi chúng sẽ không có tác dụng và có thể gây lỗi.

jsx

// SAI

function Counter({ count }) {

  count = count + 1; // Không nên làm điều này!

  return <div>{count}</div>;

}

// ĐÚNG - Sử dụng state nếu cần thay đổi giá trị

function Counter({ initialCount }) {

  const [count, setCount] = useState(initialCount);

  return (

    <div>

      <p>{count}</p>

      <button onClick={() => setCount(count + 1)}>Tăng</button>

    </div>

  );

}

Một số lưu ý để sử dụng props hiệu quả

Để tận dụng tối đa sức mạnh của props trong React, hãy ghi nhớ những lưu ý sau:

• Đặt tên prop rõ ràng, có ý nghĩa: Thay vì <User p="John" />, hãy sử dụng <User name="John" />. Tên prop nên mô tả chính xác dữ liệu mà nó chứa.
• Hạn chế truyền quá nhiều props vào một component: Nếu một component cần quá nhiều prop, đó có thể là dấu hiệu cho thấy component đó đang làm quá nhiều việc và nên được chia nhỏ.
• Ưu tiên destructuring để mã nguồn dễ đọc: Thay vì sử dụng props.x, props.y, props.z, hãy sử dụng cú pháp { x, y, z } để mã nguồn trở nên gọn gàng và dễ đọc hơn.
• Dùng defaultProps hoặc kiểm tra điều kiện để tránh lỗi: Luôn có phương án dự phòng cho các prop không bắt buộc để tránh lỗi khi chúng không được truyền.
• Tránh biến đổi props: Nếu bạn cần thay đổi dữ liệu, hãy sử dụng state thay vì cố gắng sửa đổi props.
• Sử dụng spreads operator một cách thận trọng: Mặc dù cú pháp <Child {...props} /> rất tiện lợi, nhưng nó có thể dẫn đến việc truyền quá nhiều prop không cần thiết xuống component con.

Nếu một component cần quá nhiều prop, đó có thể là dấu hiệu cho thấy component đó đang làm quá nhiều việc

Kết luận

Prop là gì trong ReactJS? Chúng ta đã tìm hiểu rằng đây là cơ chế truyền dữ liệu quan trọng giúp các component giao tiếp với nhau một cách hiệu quả. Prop cho phép chúng ta xây dựng các ứng dụng React có cấu trúc rõ ràng, dễ bảo trì và mở rộng.