React.js 07 – Props trong React

0
58

Props là gì ?

Props là cách mà component có thể nhận được các giá trị của thuộc tính truyền từ bên ngoài vào.

Props là cách mà các component có thể nói chuyện với nhau (trao đổi dữ liệu với nhau). Props sẽ được truyền từ component chính xuống.

Props là bất biến (nó không thay đổi giá trị trừ khi dữ liệu gốc của nó thay đổi).

Sử dụng props

Dưới đây là ví dụ sử dung Props trong 2 loại component

Sử dụng props trong function component

File DemoProps.js

Trong một function component các props có sãn bằng cách thêm tham số props làm tham số của function.

Sử dụng props trong component class

Trong một component class có thể nhận được props bằng this.props trong component

Ví dụ

File DemoProps.js

Truyền Props cho Component

Để truyền props cho component thì khi khởi tạo một component, đặt các props theo cách tương tự như đặt các thuộc tính trong HTML.

Ví dụ

Ở đây tôi đã đặt title dưới dạng một chuỗi đơn giản và description dưới dạng một biến.

Để chạy kiểm tra các bạn có thể chỉnh sửa nội dung index.js như sau.

Và chạy npm start

 

Giá trị mặc định cho Props

Nếu bất kỳ giá trị nào là không bắt buộc, chúng ta cần chỉ định một giá trị mặc định cho nó nếu nó bị thiếu khi component được khỏi tạo.

Ví dụ

Props Children

Trong Props có một thuộc tính đặc biệt là children . Nó chứa giá trị của bất cứ thứ gì được truyền vào trong phần nội dung của component.

Ví dụ

Trong trường hợp này, bên trong DemoProps chúng ta có thể truy câp để lấy ra “Some thing” bằng cách gọi this.props.children .

 

BÌNH LUẬN

Vui lòng nhập bình luận của bạn
Vui lòng nhập tên của bạn ở đây