Giới thiệu

Trong bài viết này, chúng ta sẽ tìm hiểu về props trong Functional Component trong React. Props là một cách để chúng ta truyền dữ liệu từ component cha đến component con.

Khái niệm về Props

Trong React, props (viết tắt của properties) là một cách để chúng ta truyền dữ liệu từ component cha đến component con. Nói cách khác, props cho phép chúng ta truyền dữ liệu giữa các component.

Cách sử dụng Props

Để sử dụng props trong một Functional Component, chúng ta chỉ cần thêm nó như một tham số cho hàm component.

Ví dụ, giả sử chúng ta có một Functional Component tên là Greeting như sau:

function Greeting(props) {
  return <h1>Hello, {props.name}</h1>;
}

Trong ví dụ trên, props là một đối tượng, và props.name là một thuộc tính của đối tượng đó.

Chúng ta có thể truyền props từ một component cha đến một component con như sau:

function App() {
  return <Greeting name="World" />;
}

Trong ví dụ trên, chúng ta truyền props name với giá trị "World" từ App (component cha) đến Greeting (component con).

Khi chạy, component Greeting sẽ hiển thị "Hello, World".

Bài tập ứng dụng props trong React Functional Component

Chúng ta sẽ tạo một ứng dụng React đơn giản, trong đó có hai component: ParentComponent và ChildComponent. ParentComponent sẽ chuyển một thông điệp đến ChildComponent thông qua props.

Yêu cầu

1. Tạo một project React mới.
2. Trong src folder, tạo hai file mới: ParentComponent.js và ChildComponent.js.
3. Trong ParentComponent.js, tạo một functional component tên là ParentComponent và chuyển một prop tên là message đến ChildComponent.
4. Trong ChildComponent.js, tạo một functional component tên là ChildComponent và nhận prop message từ ParentComponent.
5. Hiển thị prop message trong ChildComponent.

Đáp án

Dưới đây là mã nguồn cho ParentComponent.js và ChildComponent.js.

ParentComponent.js

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

const ParentComponent = () => {
    return (
      <ChildComponent message="Hello from ParentComponent" />
    );
}

export default ParentComponent;

ChildComponent.js

import React from 'react';

const ChildComponent = (props) => {
    return (
      <h1>{props.message}</h1>
    );
}

export default ChildComponent;

Trong đoạn mã trên, ParentComponent chuyển prop message có giá trị là "Hello from ParentComponent" đến ChildComponent. ChildComponent sau đó nhận prop message và hiển thị nó.

Hy vọng rằng qua bài tập này, bạn đã hiểu rõ hơn về cách sử dụng props trong React Functional Component. Hãy tiếp tục thực hành để nắm vững kiến thức này!