10. Props trong React JS

Props (viết tắt của “properties”) trong React JS là một cách để truyền dữ liệu từ thành phần cha xuống thành phần con. Props cho phép bạn tạo các thành phần có thể tái sử dụng và tùy chỉnh chúng dựa trên dữ liệu đầu vào khác nhau.

Dưới đây là cách sử dụng và truyền props vào một thành phần:

Bước 1: Định nghĩa thành phần con với Props

jsx

import React from 'react';

const Welcome = (props) => {
  return <h1>Hello, {props.name}!</h1>;
};

export default Welcome;

Bước 2: Sử dụng thành phần con trong thành phần cha và truyền props

jsx

import React from 'react';
import Welcome from './Welcome';

function App() {
  return (
    <div>
      <Welcome name="Alice" />
      <Welcome name="Bob" />
    </div>
  );
}

export default App;

Trong ví dụ này:

• Chúng ta định nghĩa thành phần con Welcome với một tham số props. Bên trong JSX, chúng ta sử dụng {props.name} để hiển thị giá trị của thuộc tính name được truyền từ thành phần cha.
• Trong thành phần cha App, chúng ta sử dụng thành phần con Welcome và truyền các giá trị khác nhau cho thuộc tính name.

Khi bạn chạy ứng dụng, bạn sẽ thấy thành phần con Welcome được hiển thị với tên tương ứng được truyền qua props.

Props còn cho phép bạn truyền bất kỳ loại dữ liệu nào từ chuỗi, số, đối tượng, mảng đến các hàm. Điều này cho phép bạn tạo các thành phần đa dạng và linh hoạt phù hợp với nhu cầu của ứng dụng của bạn.