Cách Truyền Props Trong React

Trong React, props (viết tắt của “properties”) là một cách để truyền dữ liệu từ component cha xuống component con. Props cho phép bạn truyền thông tin giữa các component và giúp chúng tương tác với nhau. Dưới đây là các bước chi tiết để truyền và sử dụng props trong React.

1. Truyền Props từ Component Cha xuống Component Con

Cách cơ bản để truyền props là trong component cha, bạn sẽ truyền một đối tượng hoặc giá trị dưới dạng thuộc tính (attribute) vào trong component con.

// Component Cha (ParentComponent)
function ParentComponent() {
  return (
    

      
Đây là component Cha
      
    
  );
}

// Component Con (ChildComponent)
function ChildComponent(props) {
  return 
{props.message}
;
}

Giải thích:

• ParentComponent truyền một props có tên là message vào ChildComponent.
• ChildComponent nhận giá trị của message thông qua đối tượng props và hiển thị nó trong phần tử <p>.

2. Truyền Props từ Component Cha xuống với Nhiều Props

Bạn có thể truyền nhiều props vào component con. Đây là ví dụ khi truyền nhiều giá trị trong cùng một component.

// Component Cha (ParentComponent)
function ParentComponent() {
  return (
    

      
Thông tin người dùng
      
    
  );
}

// Component Con (UserProfile)
function UserProfile(props) {
  return (
    

      
Tên: {props.name}
      
Tuổi: {props.age}
      
Quốc gia: {props.country}
    
  );
}

Giải thích:

• ParentComponent truyền ba props (name, age, và country) vào UserProfile.
• UserProfile sử dụng các props này để hiển thị thông tin người dùng.

3. Truyền Props với Destructuring

Thay vì sử dụng props.name, props.age, bạn có thể sử dụng destructuring để lấy trực tiếp các giá trị từ props.

// Component Cha (ParentComponent)
function ParentComponent() {
  return (
    

      
Thông tin người dùng
      
    
  );
}

// Component Con (UserProfile)
function UserProfile({ name, age, country }) {
  return (
    

      
Tên: {name}
      
Tuổi: {age}
      
Quốc gia: {country}
    
  );
}

Giải thích:

• Trong UserProfile, thay vì nhận props như một đối tượng, ta có thể sử dụng destructuring trực tiếp trong tham số hàm ({ name, age, country }) để lấy các giá trị từ props.

4. Truyền Hàm làm Props

Ngoài giá trị, bạn cũng có thể truyền hàm (function) từ component cha vào component con để xử lý các sự kiện hoặc tương tác.

// Component Cha (ParentComponent)
function ParentComponent() {
  const handleClick = () => {
    alert("Button đã được nhấn!");
  };

  return (
    

      
Gửi hàm tới component con
      
    
  );
}

// Component Con (Button)
function Button(props) {
  return Nhấn vào tôi!;
}

Giải thích:

• ParentComponent định nghĩa một hàm handleClick và truyền nó vào Button dưới dạng props onClick.
• Button nhận hàm onClick từ props và gọi nó khi người dùng nhấn vào nút.

5. Truyền Props Với Default Values

Bạn có thể cung cấp giá trị mặc định cho props trong component con bằng cách sử dụng defaultProps.

// Component Con (UserProfile)
function UserProfile({ name, age, country }) {
  return (
    

      
Tên: {name}
      
Tuổi: {age}
      
Quốc gia: {country}
    
  );
}

// Cung cấp giá trị mặc định cho props
UserProfile.defaultProps = {
  name: "Không rõ",
  age: 0,
  country: "Không xác định"
};

Giải thích:

• defaultProps giúp cung cấp giá trị mặc định cho props nếu không có giá trị nào được truyền từ component cha.

Tóm tắt

• Props là cách truyền dữ liệu từ component cha xuống component con.
• Props có thể là bất kỳ giá trị nào: chuỗi, số, hàm, hoặc thậm chí là component khác.
• Có thể sử dụng destructuring để lấy props trong component.
• Props có thể là các hàm (callback) để xử lý sự kiện.
• defaultProps giúp cung cấp giá trị mặc định cho props khi không có giá trị được truyền từ cha.

Xem thêm: