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 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

Làm thử!

Props - liên kết data trong Component

Props với Classes