Bài 10: 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">
      <strong>{ props.name }</strong>
      <p>Tuổi: { props.age }</p>
    </div>
  )
};
class Member extends React.Component {
  render() {
    return(
      <div className="member">
        <strong>{ this.props.name }</strong>
        <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/[email protected]/umd/react.development.js"></script>
    <script src="https://unpkg.com/[email protected]/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">
              <strong>{ this.props.name }</strong>
              <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

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *