React.js props xử lý data

React.js props xử lý data

Bài học này sẽ giúp bạn xử lý dữ liệu truyền vào cho một component.

Trước tiên ta tạo một nội dung index.html 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>

Thay vì viết dữ liệu trực tiếp bên trong phần render, ta sẽ tách riêng phần dữ liệu ra một dữ liệu của một đối tượng (data Object).

Khi này ta cần xử lý lại phần render sao cho có thể lấy được dữ liệu, thao tác rất đơn giản 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>
      )
    };
    const info = {
      name: 'Nguyễn Văn A',
      age: '25'
    };
    ReactDOM.render(
      <Member name={info.name} age={info.age} />,
      document.getElementById('member')
    );
  </script>
</body>
</html>

• const info khai báo giá trị cho một object.
• info.name lấy giá trị name của object.
• info.age lấy giá trị age của object.

Hiển thị trình duyệt

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

• Ta thấy việc xử lý dữ liệu của một object tương đối đơn giản.
• Tuy nhiên bài này chỉ giới thiệu về truyền dữ liệu trong một component, thực tế thì việc truyền dữ liệu giữa các component nó khác một chút, cùng xem bài học tiếp theo để rõ hơn nhé.