ReactJS - Tạo thành phần bằng cách sử dụng thuộc tính

Xin chào các bạnfuture开发者 React! Hôm nay, chúng ta sẽ bắt đầu một hành trình thú vị vào thế giới của các thành phần và thuộc tính React. Như một người giáo viên máy tính gần gũi, tôi sẽ hướng dẫn các bạn từng bước trong cuộc phiêu lưu này. Vậy, hãy lấy饮料 yêu thích của bạn, ngồi thoải mái, và cùng nhau vào cuộc!

Thành phần và Thuộc tính React là gì?

Trước khi bắt đầu tạo các thành phần, hãy hiểu chúng là gì. Hãy tưởng tượng bạn đang xây dựng một ngôi nhà bằng các khối Lego. Mỗi khối Lego giống như một thành phần React - một khối xây dựng lại được cho ứng dụng web của bạn. Bây giờ, nếu bạn muốn tùy chỉnh các khối Lego này? Đó là lúc thuộc tính (hoặc props) xuất hiện. Chúng giống như những hướng dẫn đặc biệt bạn đưa ra cho mỗi khối Lego để làm cho chúng độc đáo.

Cách tạo một thành phần sử dụng thuộc tính

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" chào hỏi những người khác nhau.

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

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

Hãy phân tích này:

1. Chúng ta định nghĩa một hàm Greeting nhận props làm đối số.
2. Trong hàm, chúng ta trả về một số JSX (đó là cách React viết mã HTML-like trong JavaScript).
3. Chúng ta sử dụng {props.name} để chèn giá trị của thuộc tính name.
4. Trong thành phần App, chúng ta sử dụng <Greeting /> ba lần với các thuộc tính name khác nhau.

Khi bạn chạy mã này, bạn sẽ thấy ba lời chào, mỗi lời chào có một tên khác nhau. Đó giống như có một robot thân thiện có thể chào hỏi bất kỳ ai bạn giới thiệu!

Thêm nhiều thuộc tính hơn

Bây giờ, hãy làm cho lời chào của chúng ta thú vị hơn bằng cách thêm một vài thuộc tính:

function Greeting(props) {
return (
<div>
<h1>Hello, {props.name}!</h1>
<p>Bạn {props.age} tuổi và bạn yêu thích {props.hobby}.</p>
</div>
);
}

function App() {
return (
<div>
<Greeting name="Alice" age={25} hobby="vẽ tranh" />
<Greeting name="Bob" age={30} hobby="chơi guitar" />
</div>
);
}

Ở đây, chúng ta đã thêm các thuộc tính age và hobby. Lưu ý rằng 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 một chuỗi. Đối với chuỗi, chúng ta sử dụng dấu phẩy kép, nhưng đối với số hoặc biểu thức JavaScript, chúng ta sử dụng dấu {}.

Đối tượng như thuộc tính

Đôi khi, việc nhóm các dữ liệu liên quan vào một đối tượng rất tiện lợi. Hãy cải tiến thành phần Greeting của chúng ta để sử dụng thuộc tính đối tượng:

function Greeting(props) {
return (
<div>
<h1>Hello, {props.person.name}!</h1>
<p>Bạn {props.person.age} tuổi và bạn yêu thích {props.person.hobby}.</p>
</div>
);
}

function App() {
const alice = { name: "Alice", age: 25, hobby: "vẽ tranh" };
const bob = { name: "Bob", age: 30, hobby: "chơi guitar" };

return (
<div>
<Greeting person={alice} />
<Greeting person={bob} />
</div>
);
}

Trong phiên bản này, chúng ta truyền một đối tượng duy nhất person làm thuộc tính, chứa tất cả thông tin về mỗi người. Điều này có thể làm cho mã của bạn sạch sẽ hơn, đặc biệt khi bạn có nhiều thuộc tính liên quan.

Trích xuất thuộc tính

Khi các thành phần của bạn phát triển, bạn có thể thấy mình viết props. rất nhiều. Có một thủ thuật hay gọi là "trích xuất" có thể làm cho mã của bạn sạch sẽ hơn:

function Greeting({ person }) {
const { name, age, hobby } = person;
return (
<div>
<h1>Hello, {name}!</h1>
<p>Bạn {age} tuổi và bạn yêu thích {hobby}.</p>
</div>
);
}

Điều này làm cùng điều như ví dụ trước, nhưng nó ngắn gọn hơn. Chúng ta đang nói "lấy thuộc tính person và trích xuất name, age, và hobby từ nó".

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

Vậy nếu ai đó quên truyền một thuộc tính cho thành phần của chúng ta? Chúng ta có thể đặt giá trị mặc định để tránh lỗi:

function Greeting({ person = { name: "Khách", age: "không rõ", hobby: "mysteries" } }) {
const { name, age, hobby } = person;
return (
<div>
<h1>Hello, {name}!</h1>
<p>Bạn {age} tuổi và bạn yêu thích {hobby}.</p>
</div>
);
}

Bây giờ, nếu chúng ta sử dụng <Greeting /> mà không có bất kỳ thuộc tính nào, nó sẽ sử dụng các giá trị mặc định thay vì bị crash.

Kiểu của thuộc tính

Khi ứng dụng của bạn phát triển, việc kiểm tra rằng bạn đang nhận được đúng kiểu thuộc tính là một ý tưởng tốt. React có một tính năng gọi là PropTypes để làm điều này:

import PropTypes from 'prop-types';

function Greeting({ person }) {
const { name, age, hobby } = person;
return (
<div>
<h1>Hello, {name}!</h1>
<p>Bạn {age} tuổi và bạn yêu thích {hobby}.</p>
</div>
);
}

Greeting.propTypes = {
person: PropTypes.shape({
name: PropTypes.string.isRequired,
age: PropTypes.number.isRequired,
hobby: PropTypes.string.isRequired
}).isRequired
};

Điều này sẽ cảnh báo bạn nếu bạn truyền sai kiểu dữ liệu cho thành phần của bạn. Đó như có một trợ lý thân thiện kiểm tra công việc của bạn!

Kết luận

Chúc mừng! Bạn đã vừa học xong các основ của việc tạo thành phần React với thuộc tính. Nhớ rằng, thuộc tính là những hướng dẫn bạn đưa ra cho các thành phần để làm cho chúng linh hoạt và có thể tái sử dụng. Chúng là một phần cơ bản của React, và việc thành thạo chúng sẽ giúp bạn tiến xa trong hành trình học React.

Dưới đây là bảng tóm tắt các phương pháp chúng ta đã covered:

Phương pháp	Mô tả
Thuộc tính cơ bản	Truyền các giá trị riêng lẻ cho thành phần
Thuộc tính đối tượng	Truyền một đối tượng chứa nhiều giá trị
Trích xuất thuộc tính	Lấy các giá trị từ thuộc tính cho mã sạch sẽ hơn
Thuộc tính mặc định	Đặt giá trị mặc định cho thuộc tính bị thiếu
PropTypes	Xác minh kiểu của thuộc tính được truyền

Tiếp tục luyện tập, thử nghiệm và xây dựng! React là một công cụ mạnh mẽ, và bạn đã trên đường trở thành một master React. Chúc bạn may mắn!

Credits: Image by storyset