ReactJS - Properties (props) Là Gì?

1. Tổng quan:

Trong ReactJS, Properties (props) là một cách để truyền dữ liệu từ thành phần cha đến thành phần con thông qua các thuộc tính. Mỗi thành phần có thể có các thuộc tính tương tự như các thuộc tính HTML và giá trị của mỗi thuộc tính có thể được truy cập bên trong thành phần bằng cách sử dụng các thuộc tính (props). Các thuộc tính này có thể là chuỗi, số, ngày, mảng, danh sách hoặc đối tượng. Các thuộc tính này cho phép các thành phần được truyền dữ liệu và được tạo ra một cách động và nâng cao. Chúng ta có thể sử dụng các thuộc tính này để truyền dữ liệu giữa các thành phần và tạo ra các ứng dụng động và phức tạp.

React cho phép các nhà phát triển tạo ra các thành phần động và nâng cao bằng cách sử dụng các thuộc tính. Mỗi thành phần có thể có các thuộc tính tương tự như các thuộc tính HTML và giá trị của mỗi thuộc tính có thể được truy cập bên trong thành phần bằng cách sử dụng các thuộc tính (props).

Ví dụ, thành phần Hello với thuộc tính name có thể được truy cập bên trong thành phần thông qua biến this.props.name.

<Hello name="React" /> // giá trị của name sẽ là "React" const name = this.props.name

Các thuộc tính của React hỗ trợ giá trị các thuộc tính khác nhau. Chúng bao gồm:

 - Chuỗi (String)
 - Số (Number)
 - Ngày và thời gian (Datetime)
 - Mảng (Array)
 - Danh sách (List)

2. Ví dụ minh họa:

Chúng ta hãy sửa đổi thành phần ExpenseEntryItem của chúng ta và thử sử dụng các thuộc tính.

Mở ứng dụng quản lý chi phí của chúng ta trong trình soạn thảo yêu thích của bạn.

Mở tệp ExpenseEntryItem trong thư mục src/components.

Giới thiệu hàm xây dựng với đối số là thuộc tính.

constructor(props) {
   super(props); 
}

Tiếp theo, thay đổi phương thức render và điền giá trị từ các thuộc tính.

render() {
  return (
    <div>
      <div><b>Item:</b> <em>{this.props.name}</em></div>
      <div><b>Amount:</b> <em>{this.props.amount}</em></div>
      <div><b>Spend date:</b> <em>{this.props.spenddate.toString()}</em></div>
      <div><b>Category:</b> <em>{this.props.category}</em></div>
    </div>
  );
}

Ở đây:

• name đại diện cho tên mặt hàng của kiểu String
• amount đại diện cho số tiền của mặt hàng của kiểu số
• spendDate đại diện cho Ngày chi tiêu của mặt hàng của kiểu ngày
• category đại diện cho danh mục của mặt hàng của kiểu String

Bây giờ, chúng ta đã cập nhật thành phần thành công bằng cách sử dụng các thuộc tính.

import React from 'react';
import './ExpenseEntryItem.css';
import styles from './ExpenseEntryItem.module.css';

class ExpenseEntryItem extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    return (
      <div>
        <div>
          <b>Item:</b> <em>{this.props.name}</em>
        </div>
        <div>
          <b>Amount:</b> <em>{this.props.amount}</em>
        </div>
        <div>
          <b>Spend Date:</b>{' '}
          <em>{this.props.spendDate.toString()}</em>
        </div>
        <div>
          <b>Category:</b> <em>{this.props.category}</em>
        </div>
      </div>
    );
  }
}

export default ExpenseEntryItem;

Bây giờ, chúng ta có thể sử dụng thành phần bằng cách truyền tất cả các thuộc tính thông qua các thuộc tính trong index.js.

import React from 'react';
import ReactDOM from 'react-dom';
import ExpenseEntryItem from './components/ExpenseEntryItem';

const itemName = "Nước ép nho";
const itemAmount = 30.00;
const spendDate = new Date("2020-10-10");
const itemCategory = "Thực phẩm";

ReactDOM.render(
  <React.StrictMode>
    <ExpenseEntryItem
      name={itemName}
      amount={itemAmount}
      spendDate={spendDate}
      category={itemCategory}
    />
  </React.StrictMode>,
  document.getElementById('root')
);