ReactJS - Thuộc tính (props): Hướng dẫn cho người mới bắt đầu

Xin chào, các nhà phát triển React tương lai! Hôm nay, chúng ta sẽ cùng tìm hiểu một trong những khái niệm cơ bản nhất trong React: Thuộc tính, hoặc như chúng ta thường gọi thân thiện, "props". Đừng lo lắng nếu bạn mới bắt đầu học lập trình - tôi sẽ hướng dẫn bạn từng bước, như tôi đã làm cho hàng trăm sinh viên trong những năm dạy học của mình. Hãy cùng bắt đầu hành trình thú vị này nhé!

Thuộc tính là gì?

Trước khi chúng ta nhảy vào mã, hãy hiểu rõ props là gì. Hãy tưởng tượng bạn đang xây dựng một ngôi nhà (ứng dụng React của chúng ta). Props giống như bản vẽ kỹ thuật cho mỗi phòng (thành phần) để biết chúng nên trông như thế nào và chứa những gì. Chúng là cách để truyền dữ liệu từ thành phần cha đến thành phần con.

Sử dụng props

Hãy bắt đầu với một ví dụ đơn giản. Chúng ta sẽ tạo một thành phần Greeting để hiển thị một thông điệp cá nhân hóa.

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

function App() {
return (
<div>
<Greeting name="Alice" />
<Greeting name="Bob" />
</div>
);
}

Trong ví dụ này, name là một thuộc tính mà chúng ta truyền vào thành phần Greeting. Hãy phân tích nó:

1. Chúng ta định nghĩa một thành phần Greeting mà mong đợi một đối tượng props.
2. Trong Greeting, chúng ta sử dụng props.name để truy cập thuộc tính name.
3. Trong thành phần App, chúng ta sử dụng Greeting hai lần, truyền các thuộc tính name khác nhau.

Khi bạn chạy mã này, bạn sẽ thấy hai lời chào: "Hello, Alice!" và "Hello, Bob!".

Truyền nhiều thuộc tính

Thuộc tính không chỉ giới hạn ở chuỗi. Hãy mở rộng thành phần Greeting của chúng ta để bao gồm thêm thông tin:

function Greeting(props) {
return (
<div>
<h1>Hello, {props.name}!</h1>
<p>Age: {props.age}</p>
<p>Favorite Color: {props.color}</p>
</div>
);
}

function App() {
return (
<div>
<Greeting name="Alice" age={28} color="blue" />
<Greeting name="Bob" age={32} color="green" />
</div>
);
}

Bây giờ chúng ta đang truyền ba thuộc tính: name, age, và color. Lưu ý cách chúng ta sử dụng dấu {} cho thuộc tính age? Đó là vì chúng ta đang truyền một số, không phải chuỗi.

Thuộc tính mặc định

Đôi khi, bạn muốn có một giá trị dự phòng cho một thuộc tính nếu nó không được cung cấp. Đó là khi các thuộc tính mặc định trở nên hữu ích. Hãy thay đổi thành phần Greeting của chúng ta để có một tuổi mặc định:

function Greeting(props) {
return (
<div>
<h1>Hello, {props.name}!</h1>
<p>Age: {props.age}</p>
</div>
);
}

Greeting.defaultProps = {
age: 25
};

function App() {
return (
<div>
<Greeting name="Alice" age={28} />
<Greeting name="Bob" />
</div>
);
}

Trong ví dụ này, nếu chúng ta không cung cấp thuộc tính age (như với Bob), nó sẽ mặc định là 25.

Props vs State

Bây giờ chúng ta đã hiểu props, hãy so sánh chúng với một khái niệm quan trọng khác trong React: state. Dưới đây là một so sánh nhanh:

Props	State
Được truyền từ cha đến con	Được quản lý trong thành phần
Chỉ đọc	Có thể thay đổi
Giúp các thành phần giao tiếp	Cho phép các thành phần trở nên động

Hãy xem điều này trong hành động với một thành phần đếm đơn giản:

import React, { useState } from 'react';

function Counter(props) {
const [count, setCount] = useState(props.initialCount);

return (
<div>
<p>Count: {count}</p>
<button onClick={() => setCount(count + 1)}>Increment</button>
</div>
);
}

function App() {
return (
<div>
<Counter initialCount={0} />
<Counter initialCount={10} />
</div>
);
}

Trong ví dụ này:

• initialCount là một thuộc tính. Nó được truyền từ App đến Counter và không thay đổi.
• count là state. Nó được khởi tạo với giá trị của initialCount, nhưng có thể thay đổi bởi hàm setCount.

Kết luận

Thuộc tính là một phần cơ bản của React, cho phép bạn tạo ra các thành phần linh hoạt, dễ tái sử dụng. Chúng giống như những nguyên liệu bí mật làm cho các công thức React của bạn trở nên độc đáo và ngon lành!

Nhớ rằng:

1. Thuộc tính chảy từ cha đến con.
2. Chúng chỉ đọc - đừng thử thay đổi trực tiếp thuộc tính!
3. Sử dụng thuộc tính mặc định cho giá trị dự phòng.
4. Thuộc tính để truyền dữ liệu, state để quản lý dữ liệu.

Trong hành trình tiếp tục của bạn với React, bạn sẽ thấy mình sử dụng props trong những cách phức tạp và thú vị hơn. Nhưng đừng lo lắng - với sự luyện tập, nó sẽ trở thành bản năng thứ hai. Giống như học骑自行车, một khi bạn đã thành thạo, bạn sẽ không bao giờ quên!

Tiếp tục lập mã, tiếp tục học tập, và quan trọng nhất, hãy vui vẻ! React là một thư viện tuyệt vời, và tôi rất mong bạn khám phá tất cả những gì nó có thể mang lại. Hẹn gặp lại lần sau, chúc bạn lập trình React vui vẻ!

Credits: Image by storyset