Skip to main content

Hiểu hơn về React default props



Trong bài viết này, ta sẽ hiểu hơn về default props trong React.

Short Intro

Reactjs, JSX-based JavaScript UI là một thư viện JS phổ biến nhất hiện nay. Hàng triệu ứng dụng được xây dựng bằng React, nó cung cấp khá nhiều ý tưởng:

- Performance tốt
- Ứng dụng nhỏ
- Vitual DOM
- Tái sử dụng code
- UI xây dựng bằng Components
- Chạy trên nhiều nền tảng: Mobile/Tablet and Desktop
- Dễ dàng cho người mới bắt đầu

Một React component y như một HTML element và component cơ bản là một class bao gồm:

- props
- data
- state ( dùng setState() để thay đổi )
- markup ( dùng render() )

Tất cả những điều trên sẽ tạo ra một UI widget.

Components là một công cụ chính để ta xây dựng giao diện UI. Tất cả các ứng dụng React sẽ có root component, nó thương được gọi là App component.

React cung cấp các component truyền data cho nhau và các events khác nhau. Bạn có thể viết một component và sử dụng nó như là một component con - chúng thì có liên kết đến nhau.

Mỗi component sẽ bao gồm các giá trị của nó:
- Data input vào là gì ?
- Làm sao để dùng nó ?

Problem Statement

React components cần truyền vào tham số props.


Đây là ví dụ cho việc truyền data từ component cha.


Ta truyền thuộc tính `catName` có giá trị là `Picky`, CatComponent sẽ nhận giá trị đó thông qua props. Tất cả các thuộc tính được truyền từ cha sang con sẽ đều thông qua props.

Vấn đề ở đây là nếu như Component cha không truyền data qua Component con thì sao ?

Tất nhiên Component con sẽ nhận được giá trị props là undefined.

Một số vấn đề khác nữa là nếu như Component con không có giá trị, hay ở đây chính là undefined thì có thể làm ứng dụng không render ra được dẫn tới crash ứng dụng.

The Solution — defaultProps

Cách giải quyết vấn đề, ta có thể sử dụng toán tử logic || để chắc chắn rằng nếu như không có props thì hiển thị giá trị còn lại.


Với cách trên nó sẽ chạy nhưng không phải là cách tốt nhất. React cung cấp một biện pháp tốt hơn, đó chính là defaultProps.

defaultProps là một thuộc tính trong React component sử dụng để xét mặc định giá trị value cho props. Nó sẽ thay đổi khi có props mới được truyền qua.

Ở phần tới ta sẽ thấy cách sử dụng defaultProps bằng ES6 class và function component.

ES6 React Component

Sử dụng ES6 class, ta sẽ dùng thuộc tính static với tên là defaultProps.


Ta sử dụng thuộc tính static và xét defaultProps trong class CatComponent thì component sẽ sử dụng giá trị mặc định của props nếu như không có props khác được truyền qua.

Functional Component


Conclusion

Vậy là ta đã hiểu hơn một phần nào đó về việc sử dụng defaultProps trong React. Hy vọng bài viết hữu ích với các bạn.

Thanks for reading !

Resource: blog.bitsrc.io
Nhãn:

Comments

Post a Comment

Popular posts from this blog

ES6 Arrow Function Cheatsheet

Dưới đây là một số cách để bạn có thể viết arrow functions trong ES6 . // Explicit Return, Multi-Line a => { return a } // Explicit Return, Single-Line a => { return a } // Implicit Return, Multi-line a => ( a ) // Implicit Return, Single-Line a => a // Multiple Parameters, Parentheses Required (a, b) => a, b Implicit vs Explicit Return Mỗi chúng ta có một cách viết arrow functions khác nhau. Với normal functions , nếu bạn muốn return 1 cái gì đó, bạn sẽ dùng từ khóa return . Arrow functions cũng như vậy. Khi bạn dùng từ khóa return , nó sẽ gọi là ` explicit return `. Hãy thử coi các ví dụ sau: Có thể nhận rõ ràng sự khác biệt. Khi nào thì dùng dấu ngoặc nhọn` {} `, bạn cần phải chính xác cái mà return ra. Tuy nhiên, nếu không dùng ` {} `, return sẽ là bao hàm, và bạn không cần chúng. Có một cách gọi tên cho việc đó. Khi bạn sử dụng dấu ngoặc nhọn như ở Example B thì nó gọi là ` block body `, và cú pháp ở Example C gọi là ` concise body `....
1 comment
Read more

Hướng dẫn cài LibreOffice trên Kali Linux

Xin chào mọi người ! Một số bạn không biết cài bộ công cụ văn phòng nào cho máy tính cài HĐH Kali Linux. Hôm nay mình sẽ hướng dẫn cho các bạn cài  LibreOffice trên Kali Linux. Nó giống như bộ Office của Microsoft và trên thực tế thì không bằng Microsoft được đâu. Việc cài đặt bộ Office này khá là đơn giản. Đầu tiên để cài thì bạn hãy tải LibreOffice phù hợp với phiên bản của máy tính đang sử dụng. Như của mình hiện tại là phiên bản LibreOffice_5.2.4 + Link Download (Download) Hãy tải phiên bản mới nhất có đuôi *.deb cho dễ cài đặt. Sau khi tải xong có 2 cách để các bạn cài đặt nó: + Cách 1: Sử dụng phần mềm Gdebi để cài đặt các file *.deb một cách dễ dàng. Tuy nhiên rất hay bị lỗi và không cài đặt được. + Cách 2: (Nên theo cách này) 1- Giải nén file LibreOffice ra. 2- Mở Terminal ra gõ:   ~# cd Downloads Các bạn có thể dùng lệnh ls để biết chính xác tên thư mục của mình và copy paste cho chuẩn. Tiếp sau đó thì gõ:   ~# cd LibreOffice_5....
3 comments
Read more

Cách mã hóa mật khẩu trong Kali Linux 2016.2 | Encrypt Passwords

Xin chào tất cả mọi người ! Như tất cả mọi người cũng đã biết việc mã hóa mật khẩu là vô cùng quan trọng trong thời buổi công nghệ thông tin phát triển như vũ bão hiện nay. Việc để mật khẩu một cách bình thường là vô cùng nguy hiểm. Hôm nay tôi xin giới thiệu cho tất cả mọi người một công cụ chuyên mã hóa mật khẩu trên Kali Linux đó chính là HashCode Tool. Việc cài đặt và sử dụng HashCode rất đơn giản, chúng ta sẽ bắt đầu luôn nào ! Bước 1:Download  Để Download HashCode các bạn có thể tải bằng cách: ~# cd Desktop ~# git clone https://github.com/Sup3r-Us3r/HashCode.git Sau đó chờ tải file HashCode về. File sẽ được lưu ở ngoài màn hình Desktop. Bước 2: Cài đặt (Install) Sau khi file đã tải xong các bạn trỏ tới file: ~# cd HashCode Chạy 3 lệnh tiếp theo: ~# sudo chmod +x hashcode-en.py ~# sudo chmod +x hashcode-pt.py ~# sudo chmod +x hashcodegui.py Sau khi chạy xong 3 lệnh trên vậy là việc cài đặt của chúng ta đã hoàn tất và bây giờ chúng ta hãy c...
Post a Comment
Read more