Bảng javascript

ngocyen @ngocyen

Theo dõi

3. 4K 107 57

Đã đăng vào ngày 20 tháng 3 năm 2020 2. 24 SA 2 phút đọc

5. 0K

0

1

• Report
• Add to series of me

Bài đăng này đã không được cập nhật trong 2 năm

• Trong bài viết này, tôi sẽ hướng dẫn các bạn cách tạo một bảng với dữ liệu động trong ReactJs
• Tôi biết nó khá đơn giản với một số bạn, nhưng hướng dẫn này dành cho những người mới bắt đầu để họ biết cách làm của họ

Start

• Chúng tôi có dữ liệu dưới dạng mảng các đối tượng giống như API. Bạn cũng có thể sử dụng API

• Đầu tiên tạo đơn giản thành phần và lưu trữ dữ liệu ở ** trạng thái**

class Table extends Component {
   constructor(props) {
      super(props) //since we are extending class Table so we have to use super in order to override Component class constructor
      this.state = { //state is by default an object
         students: [
            { id: 1, name: 'Wasif', age: 21, email: '[email protected]' },
            { id: 2, name: 'Ali', age: 19, email: '[email protected]' },
            { id: 3, name: 'Saad', age: 16, email: '[email protected]' },
            { id: 4, name: 'Asad', age: 25, email: '[email protected]' }
         ]
      }
   }

• Ở đây chúng tôi có 4 sinh viên với id, tên, tuổi và địa chỉ email. Vì bảng của tôi với dữ liệu động nên không có vấn đề gì nếu chúng tôi có 4 hoặc 100 sinh viên

Create data for tbody

• Bây giờ chúng tôi muốn vào dữ liệu sinh viên trong DOM. Chúng tôi thường sử dụng hàm map trong phản ứng để lặp lại trên mảng(kiểu như vòng lặp cho)
• Viết hàm mới và gọi nó ra bằng phương thức render. Với cách này, chúng ta sẽ thấy mã gọn hơn và dễ đọc hơn

renderTableData() {
    return this.state.students.map((student, index) => {
      const { id, name, age, email } = student
      return (
        <tr key={id}>
          <td>{id}</td>
          <td>{name}</td>
          <td>{age}</td>
          <td>{email}</td>
        </tr>
      )
    })
  }
  
  render() {
      return (
         <div>
            <h1 id='title'>React Dynamic Table</h1>
            <table id='students'>
               <tbody>
                  {this.renderTableData()} // Gọi hàm đó ra ở đây
               </tbody>
            </table>
         </div>
      )
   }

• Bạn có thể nhận thấy phương thức renderTableData của chúng tôi chỉ trả về tr chứ không phải tr bên trong bảng. Vì tr không thể là con của div nên chúng ta phải bọc tr bên trong tbody

Create data for header

• Bây giờ chúng ta viết 1 hàm mới cho phần header như trên

renderTableHeader() {
      let header = Object.keys(this.state.students[0])
      return header.map((key, index) => {
         return <th key={index}>{key.toUpperCase()}</th>
      })
   }
<thead>
{this.renderTableHeader()}
</thead>

• Sự vật. Các khóa cung cấp cho chúng tôi tất cả các khóa của sinh viên dưới dạng mảng và chúng tôi đã lưu trữ nó dưới dạng biến của tiêu đề. Vì chúng ta có thể lặp lại tiêu đề bằng cách sử dụng map()
• Bạn có thể nghĩ tại sao chúng ta không sử dụng forEach, nó cũng làm như vậy. Lý do là khi chúng tôi muốn là map() vì nó sẽ trả về một mảng mới. Nên chúng tôi sử dụng phương thức map(), trong khi forEach không trả về bất kỳ thứ gì, nó chỉ lặp lại trên các phần tử của mảng

Kết quả

import React, { Component } from 'react'

class Tables extends Component {
  constructor(props) {
    super(props)
    this.state = {
      students: [
        { id: 1, name: 'Wasif', age: 21, email: '[email protected]' },
        { id: 2, name: 'Ali', age: 19, email: '[email protected]' },
        { id: 3, name: 'Saad', age: 16, email: '[email protected]' },
        { id: 4, name: 'Asad', age: 25, email: '[email protected]' },
      ],
    }
  }

  renderTableData() {
    return this.state.students.map((student, index) => {
      const { id, name, age, email } = student
      return (
        <tr key={id}>
          <td>{id}</td>
          <td>{name}</td>
          <td>{age}</td>
          <td>{email}</td>
        </tr>
      )
    })
  }

  renderTableHeader() {
    const header = Object.keys(this.state.students[0])
    return header.map((key, index) => <th key={index}>{key.toUpperCase()}</th>)
  }

  render() {
    return (
        <table>
          <tbody>
            <tr>{this.renderTableHeader()}</tr>
            {this.renderTableData()}
          </tbody>
        </table>
    )
  }
}

export default Tables

• Đó là tất cả, chúng tôi đã hoàn thành với bảng đơn giản. Liên kết bản trình diễn

Kết luận

• Link tham khảo bài viết. https. // nhà phát triển. to/abdulbasit313/an-easy-way-to-create-a-customize-dynamic-table-in-react-js-3igg

ReactJS

Đã đăng ký Bản quyền

• Report
• Add to series of me