ReactJS Component

Linh Nguyễn

Sử Dụng ReactJS Component

Một trong những đặc điểm được coi là tính năng chìa khóa (key feature) của ReactJS đó là khả năng sử dụng lại của các component. Ở bài học này chúng ta sẽ bắt đầu làm quen với việc tạo và sử dụng các component trong ReactJS.

Bước 3.1: Tạo Component với React.createClass()

Đầu tiên chúng ta sẽ tạo một component với tên là BugList. Component này sẽ chứa danh sách các lỗi (hay bug). Trong phần đầu của tập tin App.js bạn thêm đoạn code sau:

var BugList = React.createClass({
  render: function() {
    return (
      <div>The bug list would come here.</div>
    )
  }
});

Và sửa lại đoạn code ReactDOM.render() để sử dụng component:

ReactDOM.render(
  <BugList />,
  document.getElementById('main')
);

Ở trên chúng ta gọi method React.createClass() để tạo component trong đó truyền vào đối số đầu là một object. Object này có một key tên là render là một hàm trả về phần tử <div> sẽ được dùng để hiển thị component.

Bạn để ý chúng ta bắt đầu sử dụng cú pháp JSX <BugList /> để truyền vào component BugList mới tạo ở trên. Ngoài ra bạn cũng thấy chúng ta sử dụng ID là main thay vì example. Bạn cũng cần cập nhật lại ID của phần tử <div> trong file index.html:

<div id="main"></div>

So sánh thay đổi trong source code ở bước 3.1 ở đây

Bước 3.2: Nested Component

ở bước này chúng ta sẽ tạo các component nồng (nested) BugTable, BugFilterBugAdd, trong đó BugList chứa BugTable, BugFilterBugAdd.

Thêm đoạn code sau vào đầu file App.js:

var BugFilter = React.createClass({
  render: function() {
    return (
      <div>Hiển thị filter ở đây.</div>
    )
  }
});

var BugTable = React.createClass({
  render: function() {
    return (
      <div>Hiển thị danh sách bug ở đây.</div>
    )
  }
});

var BugAdd = React.createClass({
  render: function() {
    return (
      <div>Hiển thị form để thêm bug ở đây.</div>
    )
  }
});

Đồng thời cập nhật BugList component để chứa các component liên quan:

var BugList = React.createClass({
  render: function() {
    return (
      <div>
        <h1>Ứng Dụng Bug Tracker</h1>
        <BugFilter />
        <hr />
        <BugTable />
        <hr />
        <BugAdd />
      </div>
    )
  }
});

So sánh thay đổi trong source code ở bước 3.2 ở đây

Bước 3.3: Kết Nối Các Component

Ở bước 3.2 chúng ta đã tạo ra 3 component và sử dụng chúng bên trong BugList. Ở bước này chúng ta sẽ kết nối các component với nhau. Đầu tiên bạn thêm một component BugRow vào trước BugTable trong tập tin App.js như sau:

var BugRow = React.createClass({
  render: function() {
    return (
      <tr>
        <td>{this.props.id}</td>
        <td>{this.props.status}</td>
        <td>{this.props.priority}</td>
        <td>{this.props.owner}</td>
        <td>{this.props.title}</td>
      </tr>
    )
  }
});

Và cập nhật BugTable:

var BugTable = React.createClass({
  render: function() {
    return (
      <table>
        <thead>
          <tr>
            <th>Id</th>
            <th>Status</th>
            <th>Priority</th>
            <th>Owner</th>
            <th>Title</th>
          </tr>
        </thead>
        <tbody>
          <BugRow id={1} priority="P1" status="Open" owner="Jessica Bánh Bèo" title="Bị treo máy khi mở ứng dụng" />
          <BugRow id={2} priority="P2" status="New" owner="Eddie Tí Tèo" title="Thiếu canh lề CSS cho văn bản trong table" />
        </tbody>
      </table>
    )
  }
});

Lúc này khi truy cập lại ứng dụng ở địa chỉ http://localhost:3000 bạn sẽ thấy một bảng chứa danh sách hai bug hiển thị ở hai dòng khác nhau.

Trước khi chuyển qua bước sau bạn nhúng vào file index.html đoạn mã CSS sau:

<style>
    th, td {border: 1px solid silver; padding: 2px;}
    table {border-collapse: collapse};
</style>

So sánh thay đổi trong source code ở bước 3.3 ở đây

Bước 3.4: Dynamic Dât Component

Ở bước 3.3 chúng ta đã thêm component BugRow dùng để hiển thị dữ liệu của từng bug. Tuy nhiên dữ liệu trong BugRow là được thiết lập sử dụng đoạn code HTML cứng như sau:

...
  <BugRow id={1} priority="P1" status="Open" owner="Jessica Bánh Bèo" title="Bị treo máy khi mở ứng dụng" />
  <BugRow id={2} priority="P2" status="New" owner="Eddie Tí Tèo" title="Thiếu canh lề CSS cho văn bản trong table" />
...

Ở phần này chúng ta sẽ biến dữ liệu này thành dữ liệu kiểu động lấy từ một mảng của JavaScript thay vì thêm cứng mã HTML như trên.

Đầu tiên ngay trước đoạn code của BugList component chúng ta khởi tạo biến bugData là một mảng chứa dữ liệu của các bug:

var bugData = [
  {id: 1, priority: 'P1', status:'Open', owner:'Ravan', title:'App crashes on open'},
  {id: 2, priority: 'P2', status:'New', owner:'Eddie', title:'Misaligned border on panel'},
];

Tiếp theo sửa lại BugList để sử dụng dữ liệu trong bugData như sau:


var BugList = React.createClass({
  render: function() {
    return (
      <div>
        <h1>Bug Tracker</h1>
        <BugFilter />
        <hr />
        <BugTable bugs={bugData}/>
        <hr />
        <BugAdd />
      </div>
    )
  }
});

Ở trên chúng ta thêm thuộc tính bugs (hay property) vào BugTable component.

Chúng ta sẽ sử dụng thuộc tính này khi render BugTable như sau:

var BugTable = React.createClass({
  render: function() {
    var bugRows = this.props.bugs.map(function(bug) {
      return <BugRow key={bug.id} bug={bug} />
    });
    return (
      <table>
        <thead>
          <tr>
            <th>Id</th>
            <th>Status</th>
            <th>Priority</th>
            <th>Owner</th>
            <th>Title</th>
          </tr>
        </thead>
        <tbody>
          {bugRows}
        </tbody>
      </table>
    )
  }
});

Cuối cùng cập nhật đoạn code để render BugRow:

var BugRow = React.createClass({
  render: function() {
    return (
      <tr>
        <td>{this.props.bug.id}</td>
        <td>{this.props.bug.status}</td>
        <td>{this.props.bug.priority}</td>
        <td>{this.props.bug.owner}</td>
        <td>{this.props.bug.title}</td>
      </tr>
    )
  }
});

Cuối cùng nhấn phím F5 để tải lại ứng dụng, nếu làm đúng bạn sẽ thấy trình duyệt hiển thị kết quả như ở bước 3.3.

So sánh thay đổi trong source code ở bước 3.4 ở đây

Thêm Phản Hồi

Câu Hỏi Liên Quan

Hướng Dẫn Liên Quan