Giới thiệu

Trong bài viết này, chúng ta sẽ tìm hiểu về props trong class Component của ReactJS. props là một khái niệm quan trọng trong ReactJS, giúp chúng ta truyền dữ liệu từ component cha đến component con.

Khái niệm về props

Trong ReactJS, props (viết tắt của properties) là một cách để truyền dữ liệu từ component cha đến component con. Nó giống như các tham số của một hàm.

Ví dụ, giả sử chúng ta có một component Person như sau:

class Person extends React.Component {
  render() {
    return <h2>Hello, I am {this.props.name}</h2>;
  }
}

Trong đó, {this.props.name} là cách chúng ta sử dụng props trong class component.

Sử dụng props

Để sử dụng props, chúng ta cần truyền nó như một thuộc tính khi gọi component.

Ví dụ, để truyền name cho component Person ở trên, chúng ta có thể làm như sau:

<Person name="John Doe" />

Khi đó, this.props.name trong component Person sẽ nhận giá trị là "John Doe".

Lưu ý khi sử dụng props

Một điều quan trọng cần lưu ý là props trong ReactJS là read-only, tức là bạn không thể thay đổi giá trị của nó trong component. Nếu bạn cố gắng làm điều đó, ReactJS sẽ báo lỗi.

Ví dụ, đoạn code sau sẽ gây ra lỗi:

class Person extends React.Component {
  render() {
    this.props.name = "John Doe"; // This will cause an error
    return <h2>Hello, I am {this.props.name}</h2>;
  }
}

Hy vọng với bài viết này, bạn đã hiểu rõ hơn về props trong class Component của ReactJS và cách sử dụng nó. Hãy tiếp tục thực hành để nắm vững kiến thức này!