- Hàm mũi tên (arrow function) đã được giới thiệu trong bài
Ồ, bạn chưa phải thành viên của forum Đăng nhập hoặc đăng ký ngay., cấu trúc có những vượt trội hơn so với cách sử dụng cũ, sử dụng tham số cũng linh hoạt hơn.
- Bài học này sẽ giúp các bạn chuyển đổi cách viết một props theo function thông thường sang arrow function.
So sánh cấu trúc giữa function thông thường và arrow function
Cấu trúc function thông thường | Cấu trúc arrow function |
|---|---|
|
JavaScript:
|
JavaScript:
|
- Nhìn vào so sánh cấu trúc bên trên, ta thấy cấu trúc bên trong function không có gì thay đổi, chỉ thay đổi cách khai báo function.
- Từ giờ về sau, nếu viết một function, ta sẽ sử dụng cách viết arrow function thay cho cách viết cũ nhé ^^.
Ví dụ về cách viết một Props bằng arrow function
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello React</title>
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
<div id="member"></div>
<script type="text/babel">
var Member = (props) => {
return(
<div className="member">
<h2>{ props.name }</h2>
<p>Tuổi: { props.age }</p>
</div>
)
};
ReactDOM.render(
<Member name="Nguyễn Văn A" age="25" />,
document.getElementById('member')
);
</script>
</body>
</html>Kết quả:
