![Tim hiểu về function component trong React Js 1 học lập trình frontend, fullstack hà nội Tim hiểu về function component trong React Js](https://nodemy.vn/wp-content/uploads/2023/03/What-are-function-components-1024x576.png)
Nội dung bài viết
ToggleGiới thiệu về function component trong React Js
Function Component là một cách để tạo các component trong React Js mà không cần sử dụng class. Thay vì định nghĩa các component bằng cách sử dụng class và kế thừa từ React.Component, chúng ta có thể định nghĩa các component bằng cách sử dụng các hàm.
Một Function Component sẽ nhận vào một đối tượng props làm tham số đầu vào và trả về các phần tử JSX để hiển thị component trên trang web. Function Component thường không có state và không thực hiện các phương thức lifecycle như Class Component, thay vào đó, chúng ta có thể sử dụng React Hooks để quản lý state và thực hiện các tác vụ trước hoặc sau khi component được render.
Cú pháp của function component
Cú pháp của Function Component trong React Js khá đơn giản. Để định nghĩa một Function Component, chúng ta có thể sử dụng function declaration hoặc function expression.
Function declaration:
function MyComponent(props) {
return (
{props.title}
{props.description}
);
}
Function expression:
const MyComponent = function(props) {
return (
{props.title}
{props.description}
);
}
Hoặc sử dụng arrow function:
const MyComponent = (props) => {
return (
{props.title}
{props.description}
);
}
Ở đây, MyComponent
là tên của Function Component, props
là một đối tượng chứa các thuộc tính được truyền vào component từ cha của nó. Hàm trả về các phần tử JSX để hiển thị component trên trang web.
Ví dụ về cách sử dụng function component
Dưới đây là một ví dụ về cách sử dụng Function Component để tạo một danh sách sản phẩm:
import React from 'react';
function ProductList(props) {
const products = props.products;
const listItems = products.map((product) =>
{product.name}
);
return (
Product List
{listItems}
);
}
export default ProductList;