Props trong ReactJS

Props là một object được truyền vào trong một components, mỗi components sẽ nhận vào props và trả về react element.
Props cho phép chúng ta giao tiếp giữa các components với nhau bằng cách truyền tham số qua lại giữa các components.

Khi một components cha truyền cho component con một props thì components con chỉ có thể đọc và không có quyền chỉnh sửa nó bên phía components cha.

const App = () => <Welcome name="Demo"></Welcome>

Trong ví dụ bên trên, component có tên Welcome sẽ nhận được giá trị của props có tên name vừa mới được truyền vào.

Truyền props trong các components

Giả sử mình muốn truyền cho components có tên Welcome các giá trị như:

const App = () => <Welcome name="Demo" age=18 gender=1>Hello world</Welcome>

Vậy trong components Welcome giá trị của props sẽ là một object bao gồm các giá trị truyền vào :

{
  name: "Demo",
  age: 18,
  gender : 1,
  children: "Hello world"
}

Khi ta truyền một giá trị bên trong một tags thì nó sẽ là giá trị của thuộc tính chirlden trong object props như bên trên

Nhận props trong components

Giả sử mình muốn truyền các props có tên name, email, age,.. vào trong components có tên User. Chúng ta sẽ thực hiện các bước lần lượt như sau :

Trong thư mục src của dự án chúng ta sẽ tiến hành tạo một file có tên User.js:

import React, { Component } from "react";

class User extends Component {

render() {
    return (
      <div>
          <ul>
              <li>Name: {this.props.name}</li>
              <li>Email: {this.props.email}</li>
              <li>Age:  {this.props.age}</li>
          </ul>
      </div>
    );
  }
}

export default User ;

Component này sẽ hiển thị các props được truyền vào bao gồm: name, email, age,….

Tiếp theo ở file App.js, chúng ta sẽ import component User và truyền vào đó các props.

import React from "react";
import User from "./User "; //Import component vào
function App(props) {
  return (
    <div>
      <User name="Demo" email="demo@gmail.com" age="18" />
    </div>
  );
}
export default App;