揭秘 React Hook 的无限潜力：打造可排序表格组件

前端

2023-12-15 09:56:42

React Hook：赋能前端开发的利器

React Hook 的出现，彻底改变了 React 的开发方式。它为我们提供了一种优雅且强大的机制，可以轻松地将状态管理、生命周期方法和其他逻辑与函数式组件结合起来。

打造可排序表格组件

表格在现代 Web 应用程序中扮演着至关重要的角色。然而，添加排序功能往往是一项繁琐而耗时的任务。借助 React Hook，我们可以将此过程简化到令人惊叹的程度。

React Hook 的登场

在我们的可排序表格组件中，我们将使用 useState Hook 来管理表格数据和排序状态。useState 允许我们在函数式组件中创建和管理状态，而无需使用类组件。

代码实现

import React, { useState } from 'react';

const SortableTable = ({ data }) => {
  const [sortedData, setSortedData] = useState(data);
  const [sortField, setSortField] = useState('');
  const [sortOrder, setSortOrder] = useState('asc');

  const handleSort = (field) => {
    const newSortedData = [...sortedData];
    newSortedData.sort((a, b) => {
      if (sortOrder === 'asc') {
        return a[field] > b[field] ? 1 : -1;
      } else {
        return a[field] < b[field] ? 1 : -1;
      }
    });

    setSortedData(newSortedData);
    setSortField(field);
    setSortOrder(sortOrder === 'asc' ? 'desc' : 'asc');
  };

  return (
    <table>
      <thead>
        <tr>
          {Object.keys(data[0]).map((field) => (
            <th key={field} onClick={() => handleSort(field)}>
              {field}
              {sortField === field && (
                sortOrder === 'asc' ? ' ⬆️' : ' ⬇️'
              )}
            </th>
          ))}
        </tr>
      </thead>
      <tbody>
        {sortedData.map((row) => (
          <tr key={row.id}>
            {Object.values(row).map((value) => (
              <td key={value}>{value}</td>
            ))}
          </tr>
        ))}
      </tbody>
    </table>
  );
};