React.js Props

React.js Props

Tiếp theo bài học về React.js Component, ta đã biết component thực chất là một function Javascript (hoặc class), phương thức truyền giá trị giữa các function này được gọi là props, chúng được React xử lý và trả kết quả hiển thị trên trình duyệt.

Cách viết một React.js Props

Thay vì viết cố định tên và tuổi bên trong component Member, thì ta có thể viết như sau:

<!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">
    function 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>

Ở component Member ta đã sử dụng props, giống như cách báo cho hệ thống React biết nơi nào xuất hiện props thì nơi đó sẽ được liên kết với các biến (name, age), khi render thì các tham số (Nguyễn Văn A, 25) sẽ được truyền vào các biến này.

Hiển thị trình duyệt khi này vẫn không thay đổi

Nguyễn Văn A
Tuổi: 25

Tái sử dụng Component trong cùng khu vực (danh sách, nhóm, …)

Giả sử ta cần render thêm một member với thông tin “Trần Thị B”, “18” tuổi, thay vì viết thêm một component mới, thì ta có thể sử dụng lại component đã có như sau:

<!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>
  <style>
    #member {background-color: #b3eaff; padding: 10px;}
  </style>
</head>
<body>
  <div id="member"></div>
  <script type="text/babel">
    function Member(props){
      return(
        <div className="member">
          <h2>{ props.name }</h2>
          <p>Tuổi: { props.age }</p>
        </div>
      )
    };
    var memberlist = (
      <div>
        <Member name="Nguyễn Văn A" age="25" />
        <Member name="Trần Thị B" age="18" />
      </div>
    );
    ReactDOM.render(
      memberlist,
      document.getElementById('member')
    );
  </script>
</body>
</html>

Hiển thị trình duyệt

Nguyễn Văn A
Tuổi: 25

Trần Thị B
Tuổi: 18

Với cách khai báo một biến mới memberlist như trên, ta có thể sử dụng nhiều component cùng lúc, việc này sẽ giúp giải quyết nhiều cấu trúc sau này.

Tái sử dụng Component ở nhiều nơi khác nhau

Cu member với thông tin “Trần Thị B”, “18” tuổi, tuy nhiên thông tin này được sử dụng ở một khu vực khác, không thuộc về id=”member”, thì ta ta chỉ việc thêm một render mới (sẽ có phương pháp khác, giới thiệu sau nhé ^^):

<!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>
  <style>
    #member,#client { padding: 20px; }
    #member {background-color: #b3eaff}
    #client {background-color: #ffdede}
  </style>
</head>
<body>
  <div id="member"></div>
  <div id="client"></div>
  <script type="text/babel">
    function 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')
    );
    ReactDOM.render(
      <Member name="Trần Thị B" age="18" />,
      document.getElementById('client')
    );
  </script>
</body>
</html>

Hiển thị trình duyệt

Nguyễn Văn A
Tuổi: 25

Trần Thị B
Tuổi: 18

Khi này Nguyễn Văn A sẽ thuộc về id=”member”, Trần Thị B sẽ thuộc về id=”client”.