React.js Props by Class

React.js Props by Class

  • Trong phiên bảng Javascript ES6, chúng ta có thể chuyển đổi một function sang dạng Class, việc này có nhiều ưu điểm hơn so với cách viết function, thao tác với các object khá tốt, các bạn có thể tìm hiểu thêm tại ES6 - classes.

Cấu trúc chuyển đổi function sang Class

  • So sánh cấu trúc giữa function và Class ta được như sau:
Cấu trúc Function Cấu trúc Class 
function Member(props){
  return(
    <div className="member">
      <h2>{ props.name }</h2>
      <p>Tuổi: { props.age }</p>
    </div>
  )
};
 
class Member extends React.Component {
  render() {
    return(
      <div className="member">
        <h2>{ this.props.name }</h2>
        <p>Tuổi: { this.props.age }</p>
      </div>
    )
  }
};
  • Nhìn vào so sánh cấu trúc bên trên, ta thấy dễ dàng chuyển đổi một function sang Class:
    • function Member(props) thành class Member extends React.Component.
    • Thêm render() {}.
    • Ở mỗi props thêm this.

Ví dụ về cách viết một Props với Class

<!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">
      class Member extends React.Component {
        render() {
          return(
            <div className="member">
              <h2>{ this.props.name }</h2>
              <p>Tuổi: { this.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 với function arrow

React.js State