Cơ chế props trong React Js là gì ? Sử dụng props như thế nào?

Home / Cơ chế props trong React Js là gì ? Sử dụng props như thế nào?

Trong JavaScript(JS) thuần khi muốn truyền dữ liệu vào một phần tử (Element) thì ta thường dùng tới DOM HTML để truy xuất dữ liệu một cách dễ dàng nhất. Nhưng trong React thì bạn không để dùng DOM HTML như trong JS thuần. Vì React sử dụng Virtual DOM thông qua 2 cơ chế PropsState. Hôm nay mình xin nói về chế Props trong React. Bài viết sẽ có nhiều thiếu sót mong các bạn thông cảm.

1. Function và Class Component

Về mặt khái niệm thì Props là một cơ chế truyền thông tin vào các Component cha bao bọc bên ngoài vào các Component con bên trong

Props trong React

Cách gọi Function và Class Component được biểu hiện rõ trong ví dụ sau:

 
function CallName(props) {
  return 



<h1>My Name: {props.name}</h1>



;
 }

Do kiểu file của React là *.jxs nên trong function ta có thể return về một nhóm HTML Element. Tương tự như bên Class Component ta sẽ làm như sau

 
class CallName extends React.Component {
  render() {
    return 


<h1>My Name: {props.name}</h1>



;
  }
}

2. Cách Render Component

Ở phần 1 mình có tạo một Class Component tên là CallName thì mình sẽ gọi và truyền Props vào Component CallName như sau

 const elementName = <Welcome name="Dương" />;

Sau đó các bạn chỉ cần gọi ra thì trên màn hình sẽ xuất hiện My Name: Duong.

Vậy là chúng ta đã hoàn thành xong việc tìm hiểu và sử dụng cơ chế Props

Giờ làm việc

Thứ hai - Thứ sáu 08h00 - 20h00

Thứ 7 08h00 - 20h00

Chủ nhật 08h00 - 20h00

Liên Hệ

Bài viết trước
Callback Function là gì? Ứng dụng của Callback Function là gì?
Bài viết tiếp theo
Internal Links là gì? Cách xây mô hình liên kết nội bộ hiệu quả

    Đăng kí nhận thông tin

    Đăng ký ngay để nhận được những thông tin khi có bài viết mới!