在react中添加排序图标

import React, { useState } from 'react';

const SortIcon = ({ direction }) => {
  return (
    <span>
      {direction === 'asc' && <i className="fa fa-sort-asc" />}
      {direction === 'desc' && <i className="fa fa-sort-desc" />}
    </span>
  );
};

const Table = () => {
  const [sortDirection, setSortDirection] = useState('asc');

  const handleSort = () => {
    // 处理排序逻辑，更新sortDirection
    setSortDirection(sortDirection === 'asc' ? 'desc' : 'asc');
  };

  return (
    <table>
      <thead>
        <tr>
          <th>列名</th>
          <th onClick={handleSort}>
            排序 <SortIcon direction={sortDirection} />
          </th>
        </tr>
      </thead>
      <tbody>
        {/* 表格内容 */}
      </tbody>
    </table>
  );
};

export default Table;