Ngày hôm nay chúng ta cùng nhau đi vào tìm hiểu những cách sử dụng phương thức props(truyền dữ liệu từ component cha sang component con) và cách dùng reuse component nha!
Trước khi đi vào bài này thì bạn phải học xong bài Click Event Và State Hook Trong React đã nha.
Sử Dụng Props Trong React
Props là một phương thức giúp chúng ta có thể truyền dữ liệu từ component cha sang component con. Việc sử dụng props giúp bạn có thể chia các component thành nhiều phần nhỏ hơn. Từ đó giúp việc tối ưu code và sử dụng lại component dược dễ dàng hơn.Và để giúp dễ hiểu thì trong phần này mình sẽ tạo một Component là BlogList với chức năng là hiển thị danh sách bài viết từ dữ liệu được lấy từ thằng component cha là Home.
Đầu tiên chúng ta sẽ tạo component BlogList
Sau đó mình sẽ lấy code từ Home chuyển sang cho thằng con BlogList component nhé.
Tiếp theo chúng ta sẽ import component BlogList vào Home thông qua đoạn mã sau nhé!
Như bạn thấy thì khi chạy dự án react thì nó sẽ xảy ra lỗi. Do component Blog List không nhận được dữ liệu từ thằng cha ('blogs' is not defined). Do đó bây giờ chúng ta sẽ sử dụng thuộc tính props để truyền danh sách thông qua đoạn mã sau nha:
Sau khi đã truyền dữ liệu danh sách xong thì chúng ta cần phải khai báo nó ở trong component BlogList thông qua đoạn mã sau:
Và kết quả bạn xem video bên dưới nha.
Ngoài ra bạn cũng có thể truyền dữ liệu dạng string bằng props. Bây giờ chúng ta sẽ thêm thuộc tính title cho component BlogList nha.
Sau đó chúng ta sẽ lấy dữ liệu được truyền vào thông qua đoạn mã sau nhé.
Và kết quả bạn xem hình ảnh bên dưới nha!
Ở đây mình có lưu ý là để tránh phải khai báo từng biến bằng tham số props như:
const title = props.title;
const blogs = props.blogsthì bạn có thể thiết lập nó ngay trực tiếp trong tham số của component thông qua đoạn mã sau:
Reusing Components
Đây chính là điểm quan trọng khi chúng ta sử dụng props đó là có thể sử dụng lại component một cách nhanh chóng và dễ dàng. Để giúp bạn hiểu rõ hơn thì mình sẽ viết một đoạn mã để xuất ra các bài viết từ tác giả "developer" nhé. (bạn lưu ý trong video mình có thêm và chỉnh sửa một số class nữa nha)
Tổng kết:
Qua đây mình mong bài viết sẽ cung cấp thêm cho bạn những kiến thức về thuộc tính props và reused component trong React. Nếu có thắc mắc gì cứ gửi email mình sẽ phản hồi sớm nhất có thể. Rất mong bạn tiếp tục ủng hộ trang web để mình có thể viết nhiều bài hay hơn nữa nhé. Chúc bạn có một ngày vui vẻ!
