Props là đối số đầu tiên của hàm component, dùng để truyền giá trị các thuộc tính của nó

Ví dụ, trong components/component.tsx:

export default function Component(props) {
    return <span>Giá trị của thuộc tính 1  {props.thuộcTính1}. Giá trị của thuộc tính 2  {props.thuộcTính2}.</span>
} 

(Props là đối số đầu tiên của hàm component, dùng để truyền giá trị các thuộc tính của nó)
Trong routes/index.tsx:
import Component from '../components/component.tsx'

export default function Home() {
    return <Component thuộcTính1 = 'hello' thuộcTính2 = 'world' />

// 👉 Giá trị của thuộc tính 1 là hello. Giá trị của thuộc tính 2 là world.
} 

Ta thấy trong index.tsx hàm Component() được dùng như thể đó là HTML.

Khi viết components/component.tsx thường người ta sẽ destructuring luôn props để vừa thấy rõ ràng trong props đó sẽ có những thuộc tính nào, vừa để đỡ phải viết lại nhiều lần:

export default function Component({thuộcTính1, thuộcTính2}) {
    return <span>Giá trị của thuộc tính 1  {thuộcTính1}. Giá trị của thuộc tính 2  {thuộcTính2}.</span>
} 


Cập nhật lần cuối : 15 tháng 2, 2024
Tạo : 30 tháng 1, 2024