Giới thiệu

Chào mừng bạn đến với bài viết hôm nay! Nếu bạn đã theo dõi các bài trước, bạn đã tạo thành công thành phần React đầu tiên của mình - một thành phần hiển thị "Hello, World!". Đó là một bước khởi đầu tuyệt vời, nhưng thành phần đó vẫn là tĩnh và sẽ luôn hiển thị cùng một nội dung, bất kể bạn đặt nó ở đâu trong ứng dụng của mình.

Trong bài viết này, chúng ta sẽ khám phá sức mạnh thực sự của React. Chúng ta sẽ đi sâu vào props, chìa khóa để làm cho các thành phần của bạn trở nên động và có thể tái sử dụng. Hãy tưởng tượng props như một cách để truyền dữ liệu vào một thành phần, giống như bạn truyền đối số vào một hàm.

Cuối bài viết, bạn sẽ biết cách tạo một thành phần và sau đó sử dụng nó nhiều lần với dữ liệu khác nhau để hiển thị mọi thứ bạn muốn.

Giải Quyết Vấn Đề với Các Thành Phần Tĩnh

Trong bài viết trước, bạn đã thành công trong việc tạo thành phần React đầu tiên - một thẻ <h1> đơn giản không ngần ngại nói "Hello, World!". Xin chúc mừng! Đó là một bước tiến tuyệt vời, nhưng thành phần đó vẫn tĩnh. Nó được mã hóa cứng để luôn hiển thị cùng một văn bản, không quan tâm đến việc bạn đặt nó ở đâu trong ứng dụng.

Điều này trở thành một vấn đề lớn khi xây dựng ứng dụng thực tế. Hãy nghĩ đến một dòng thời gian mạng xã hội. Mỗi bài viết có tên người dùng, ảnh đại diện và văn bản khác nhau. Bạn không muốn tạo một thành phần mới cho mỗi bài viết. Điều đó sẽ cực kỳ không hiệu quả và lộn xộn.

Vậy làm cách nào để giải quyết điều này? Làm thế nào để xây dựng một thành phần và sau đó sử dụng nó nhiều lần với dữ liệu khác nhau?

Câu trả lời ở đây chính là props.

Bạn có thể nghĩ về một thành phần React mà không có props như một hàm JavaScript đơn giản mà không có đối số; nó luôn trả về cùng một giá trị. Props, viết tắt của "properties", giống như các đối số bạn truyền vào một hàm. Chúng cho phép bạn tùy chỉnh đầu ra của một thành phần mà không cần thay đổi mã cốt lõi của nó, làm cho nó có thể tái sử dụng và linh hoạt.

Giống như một hàm có thể nhận các đối số khác nhau để tạo ra các kết quả khác nhau, một thành phần có thể nhận các props khác nhau để hiển thị các dữ liệu khác nhau. Khái niệm đơn giản này là chìa khóa để xây dựng các ứng dụng mạnh mẽ và linh hoạt.

Props Là Gì?

Hãy có một định nghĩa rõ ràng và ngắn gọn về props.

Thuật ngữ props là viết tắt của properties. Ở mức cơ bản nhất, chúng là một cơ chế để truyền dữ liệu từ thành phần cha xuống thành phần con.

Hãy tưởng tượng các thành phần của bạn như một cây gia đình. Dữ liệu có thể chảy từ cha (App) xuống con (Welcome), nhưng không theo chiều ngược lại. Một thành phần có thể nhận props từ cha và sử dụng thông tin đó để quyết định những gì sẽ được hiển thị.

Một quy tắc quan trọng cần nhớ về props là chúng là chỉ đọc. Một thành phần con nhận dữ liệu, nhưng không thể thay đổi nó. Bạn không thể sửa đổi props bên trong thành phần nhận chúng. Quy tắc này là một phần cốt lõi của triết lý thiết kế của React, vì nó đảm bảo rằng luồng dữ liệu của bạn là dự đoán được và dễ lý giải.

Tóm lại, props là cách bạn cung cấp cho các thành phần của mình hướng dẫn về những gì chúng nên hiển thị và cách chúng nên hoạt động.

Tạo Thành Phần Đầu Tiên Với Props

Đến lúc chúng ta bắt tay vào thực hành! Chúng ta sẽ xây dựng một thành phần Welcome có thể tái sử dụng để hiển thị một lời chào với bất kỳ tên nào mà chúng ta cung cấp cho nó.

Tạo Tập Tin Mới:

Trong thư mục src, hãy tạo một tập tin mới và đặt tên là Welcome.jsx. Đây là nơi chúng ta sẽ viết mã cho thành phần mới của mình.

Thêm Mã Thành Phần:

Mở tập tin Welcome.jsx và dán mã sau vào nó.

import React from 'react';

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

export default Welcome;

Hiểu Mã:

• Hàm Welcome bây giờ nhận một đối số gọi là props. Đây là một đối tượng JavaScript sẽ chứa tất cả dữ liệu được truyền vào thành phần của chúng ta. Bên trong câu lệnh return, chúng ta sử dụng dấu ngoặc nhọn {} để chèn JavaScript trực tiếp vào JSX. Khi React hiển thị điều này, nó sẽ thay thế {props.name} bằng giá trị thực tế của thuộc tính name.
• Chúng ta cũng đã thêm một câu lệnh export default. Điều này giúp thành phần Welcome của chúng ta có thể được sử dụng và nhập vào các tập tin khác (như App.jsx hoặc tương tự).

Giờ đây, bạn đã thành công trong việc tạo một thành phần có thể tái sử dụng và sẵn sàng nhận và hiển thị dữ liệu! Trong bước tiếp theo, chúng ta sẽ xem cách truyền dữ liệu đó từ thành phần App.

Sử Dụng Thành Phần Mới Với Props

Bây giờ chúng ta đã sẵn sàng cho thành phần Welcome nhận dữ liệu, hãy xem cách chúng ta sử dụng nó. Chúng ta sẽ làm việc bên trong tập tin App.jsx, vì đây là thành phần cha sẽ truyền dữ liệu xuống các thành phần con.

Nhập Thành Phần Mới:

Ở đầu tập tin App.jsx, thêm một câu lệnh nhập cho thành phần mới của chúng ta.

import Welcome from './Welcome';

Gọi Thành Phần Với Props:

Bây giờ, hãy xóa nội dung hiện tại bên trong câu lệnh return trong tập tin App.jsx. Chúng ta sẽ thay thế nó bằng thành phần Welcome mới và truyền vào một prop tên.

<Welcome name="World" />

Tập tin App.jsx của bạn bây giờ nên trông như sau:

import './App.css';
import Welcome from './Welcome.jsx';

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

export default App;

Kết Quả:

Trình duyệt của bạn nên hiển thị như sau:

Kiểm Tra Khả Năng Tái Sử Dụng:

Đây là lúc bạn thấy sức mạnh của props! Bạn có thể sử dụng thành phần Welcome của mình nhiều lần như bạn muốn, truyền vào một prop tên khác mỗi lần. Hãy thử nghiệm bằng cách thêm một vài dòng nữa. Cập nhật tập tin App.jsx với mã sau:

import './App.css';
import Welcome from './Welcome';

function App() {
  return (
    <>
      <Welcome name="John Doe" />
      <Welcome name="React" />
      <Welcome name="Friend" />
    </>
  );
}

export default App;

Những Sai Lầm Thường Gặp Với Props

1. Cố Gắng Thay Đổi Một Prop

Một quy tắc chính của React là props là chỉ đọc. Bạn không thể thay đổi giá trị của một prop bên trong thành phần nhận nó. Cố gắng thực hiện điều này sẽ dẫn đến lỗi hoặc hành vi không mong muốn.

Cách Sai:

// Trong thành phần con
function Welcome(props) {
  // Đây là một điều cấm kỵ!
  props.name = "New Name"; 
  return <h1>Hello, {props.name}</h1>;
}

Cách Đúng:
Nếu một thành phần cần thay đổi dữ liệu của chính nó, dữ liệu đó nên được quản lý bằng state, không phải bằng props.

2. Truyền Số và Boolean Dưới Dạng Chuỗi

Khi tôi mới bắt đầu sử dụng props, tôi đã mắc phải một sai lầm rất phổ biến: tôi đã truyền mọi thứ dưới dạng chuỗi. Một ngày nọ, tôi có một thành phần mà chỉ nên hiển thị khi một prop là true, nhưng nó vẫn cứ hiển thị ngay cả khi tôi truyền nó là "false".

Sau một thời gian suy nghĩ, tôi đã tìm thấy sai lầm của mình: trong JavaScript, tất cả các chuỗi không rỗng được coi là truthy. Điều đó có nghĩa là "false", "0", và " " đều được coi là đúng trong ngữ cảnh boolean. Đây là một bài học quan trọng cần học sớm.

Trong JSX, bất kỳ thứ gì bạn đặt trong dấu ngoặc kép "" đều được coi là một chuỗi. Nếu bạn muốn truyền một giá trị JavaScript - như một số, một boolean, một mảng, hoặc một đối tượng - bạn phải bọc nó trong dấu ngoặc nhọn {}.

3. Không Destructuring Props

Mặc dù không phải là một sai lầm thực sự, nhưng đây là một mẫu phổ biến khiến mã trở nên dài dòng và khó đọc. Tôi nhớ mã đầu tiên của tôi nhận hơn hai props. Thành phần cần hiển thị tên người dùng, tuổi, vị trí và một tiểu sử ngắn.

Tôi đã viết mã sử dụng props.name, props.age, props.location, và props.bio. Mã chạy tốt, nhưng bắt đầu cảm thấy lộn xộn. Việc lặp lại trở nên t tedious, và tôi thường phải nhìn lên trên cùng của tập tin để nhớ các tên prop chính xác. Đôi khi tôi gõ props.userLocation thay vì props.location, dẫn đến một lỗi nhanh chóng và khó chịu.

Kết Luận

Chúng ta vừa làm một điều mạnh mẽ. Chúng ta đã biến chương trình "Hello, World" tĩnh đơn giản thành một chương trình động và có thể tái sử dụng. Đây là ma thuật cốt lõi của React. Thay vì viết một thành phần mới cho mỗi mẩu nội dung, chúng ta có thể sử dụng một thành phần duy nhất và chỉ cần truyền vào các props khác nhau để tùy chỉnh nó.

Bây giờ bạn đã học rằng:

• Props giống như các đối số cho các thành phần của bạn.
• Chúng được truyền từ một thành phần cha xuống một thành phần con.
• Chúng là chỉ đọc, có nghĩa là thành phần con có thể sử dụng nhưng không thể thay đổi chúng.

Khái niệm về việc truyền dữ liệu xuống là nền tảng để xây dựng các ứng dụng React phức tạp.

Thử Thách Bài Tập:

Để đảm bảo những khái niệm này được ghi nhớ, đây là một thử thách nhỏ cho bạn:

Hãy thử nghiệm với việc truyền nhiều props đến một thành phần duy nhất và thấy sức mạnh của khả năng tái sử dụng.

Cách Gửi Giải Pháp Của Bạn

Nếu bạn muốn chia sẻ công việc của mình hoặc nhận phản hồi, bạn có thể chia sẻ một ảnh chụp màn hình của dự án hoàn thành trong phần bình luận bên dưới. Bạn cũng có thể dán mã App.jsx đã cập nhật của mình trực tiếp vào cuộc thảo luận để nhận phản hồi từ tôi và cộng đồng. Bài viết tiếp theo sẽ có câu trả lời cho bài tập này.

Bài Viết Sắp Tới

Chúc mừng bạn đã hoàn thành bài học về Props! Bạn hiện đã là một chuyên gia trong việc sử dụng props để làm cho các thành phần của bạn trở nên động. Trong bài viết tiếp theo, chúng ta sẽ khám phá một khái niệm lớn khác để xây dựng giao diện tương tác: State.

Hẹn gặp lại vào thứ Sáu!

Tài Nguyên Tham Khảo

• Props by NetNinja
• Tài liệu chính thức của React

Kết Nối Với Chúng Tôi!

Nếu bạn thấy bài viết này hữu ích, hãy xem xét việc theo dõi tôi trên Dev.to. Bạn cũng có thể kết nối với tôi trên các nền tảng này để có thêm nội dung và cuộc trò chuyện:

• LinkedIn: linkedin.com/in/mariamendonca/
• GitHub: github.com/mendoncamaria
• X: @mmendonca0610
• Mastodon Social: @mendoncamaria