Props – arrow function
Props – arrow function Hàm mũi tên (arrow function) đã được giới thiệu trong bài ES6 – arrow function, 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 […]
Props – arrow function
- Hàm mũi tên (arrow function) đã được giới thiệu trong bài ES6 – arrow function, 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 |
function Member(props){
return(
<div className="member">
<h2>{ props.name }</h2>
<p>Tuổi: { props.age }</p>
</div>
)
};
|
var Member = (props) => {
return(
<div className="member">
<h2>{ props.name }</h2>
<p>Tuổi: { props.age }</p>
</div>
)
};
|
- 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
<!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>
Hiển thị trình duyệt
Nguyễn Văn A Tuổi: 25
