Thứ Sáu, 24 tháng 11, 2023

React Props

Props là các đối số được truyền vào các React component.

Props được truyền vào các component thông qua các thuộc tính HTML.

props là viết tắt của properties.

Props của React

Props của React thì giống như là các đối số của hàm trong JavaScript và giống như là các thuộc tính trong HTML.

Để gửi props vào một component, chúng ta sử dụng cú pháp giống như các thuộc tính HTML:

Ví dụ sau sẽ thêm một thuộc tính "brand" vào phần tử có tên là Car:


Component nhận đối số như là một đối tượng props.

Ví dụ sau sẽ sử dụng thuộc tính brand trong component:


Truyền dữ liệu

Props cũng là cách chúng ta truyền dữ liệu từ một component đến một component khác, như là các tham số.

Ví dụ sau sẽ gửi thuộc tính "brand" từ Garage component đến Car component:


Nếu như chúng ta có một biến để gửi, và không phải là một chuỗi như trong ví dụ bên trên, thì chúng ta chỉ cần đặt tên biến vào bên trong cặp dấu ngoặc nhọn:

Ví dụ sau sẽ tạo ra một biến có tên là carName và gửi nó đến Car component:


Hoặc nếu như nó là một đối tượng thì nó  sẽ được gửi như sau:

Ví dụ sau sẽ tạo ra một đối tượng có tên là carInfo và gửi nó đến Car component:


Lưu ý: Props của React là chỉ đọc! Chúng ta sẽ gặp lỗi nếu như chúng ta cố gắng thay đổi giá trị của chúng.

Không có nhận xét nào:

Đăng nhận xét

Styling React Using Sass

Sass là cái gì? Sass là một tiền xử lý của CSS. Các tập tin Sass được thực thi trên server và gửi CSS đến trình duyệt. Bạn có thể tìm hiểu t...