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 (
<div>
<h1><span class="ez-toc-section" id="propstitle"></span>{props.title}<span class="ez-toc-section-end"></span></h1>
<p>{props.description}</p>
</div>
);
}
Function expression:
const MyComponent = function(props) {
return (
<div>
<h1><span class="ez-toc-section" id="propstitle-2"></span>{props.title}<span class="ez-toc-section-end"></span></h1>
<p>{props.description}</p>
</div>
);
}
Hoặc sử dụng arrow function:
const MyComponent = (props) => {
return (
<div>
<h1><span class="ez-toc-section" id="propstitle-3"></span>{props.title}<span class="ez-toc-section-end"></span></h1>
<p>{props.description}</p>
</div>
);
}
Ở đâ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) =>
<li key={product.id}>{product.name}</li>
);
return (
<div>
<h1><span class="ez-toc-section" id="Product_List"></span>Product List<span class="ez-toc-section-end"></span></h1>
<ul>{listItems}</ul>
</div>
);
}
export default ProductList;
