当前位置：首页 > React

react多表格如何

2026-02-12 01:26:49React

在 React 中处理多表格

React 中处理多表格可以通过动态渲染、状态管理和组件化来实现。以下是一些常见的方法：

动态渲染表格数据

使用数组存储多个表格的数据，通过 map 方法动态渲染表格：

const tablesData = [
  { id: 1, data: [...], columns: [...] },
  { id: 2, data: [...], columns: [...] }
];

function App() {
  return (
    <div>
      {tablesData.map(table => (
        <Table key={table.id} data={table.data} columns={table.columns} />
      ))}
    </div>
  );
}

独立状态管理

为每个表格维护独立的状态，避免相互干扰：

const [table1Data, setTable1Data] = useState([...]);
const [table2Data, setTable2Data] = useState([...]);

function handleTable1Update(rowIndex, newValue) {
  const updated = [...table1Data];
  updated[rowIndex] = newValue;
  setTable1Data(updated);
}

可复用表格组件

创建可配置的表格组件，通过 props 控制不同表格的显示和行为：

react多表格如何

function DataTable({ data, columns, onRowClick }) {
  return (
    <table>
      <thead>
        <tr>{columns.map(col => <th key={col.key}>{col.title}</th>)}</tr>
      </thead>
      <tbody>
        {data.map(row => (
          <tr key={row.id} onClick={() => onRowClick(row)}>
            {columns.map(col => <td key={col.key}>{row[col.key]}</td>)}
          </tr>
        ))}
      </tbody>
    </table>
  );
}

表格联动

实现表格间的数据联动需要共享状态或使用状态提升：

function ParentComponent() {
  const [sharedData, setSharedData] = useState([...]);

  return (
    <>
      <TableA data={sharedData} onUpdate={setSharedData} />
      <TableB data={sharedData} onUpdate={setSharedData} />
    </>
  );
}

性能优化

对于大型表格，考虑使用虚拟滚动或分页：

react多表格如何

import { FixedSizeList as List } from 'react-window';

function VirtualizedTable({ data }) {
  const Row = ({ index, style }) => (
    <div style={style}>
      {Object.values(data[index]).join(' - ')}
    </div>
  );

  return (
    <List
      height={400}
      itemCount={data.length}
      itemSize={35}
      width={'100%'}
    >
      {Row}
    </List>
  );
}

表格样式与功能扩展

样式隔离

使用 CSS Modules 或 styled-components 为不同表格应用独立样式：

import styles from './TableA.module.css';

function TableA() {
  return <table className={styles.tableA}>...</table>;
}

功能扩展

为表格添加排序、筛选等高级功能：

function SortableTable({ data }) {
  const [sortConfig, setSortConfig] = useState({ key: null, direction: 'asc' });

  const sortedData = useMemo(() => {
    if (!sortConfig.key) return data;
    return [...data].sort((a, b) => {
      if (a[sortConfig.key] < b[sortConfig.key]) {
        return sortConfig.direction === 'asc' ? -1 : 1;
      }
      if (a[sortConfig.key] > b[sortConfig.key]) {
        return sortConfig.direction === 'asc' ? 1 : -1;
      }
      return 0;
    });
  }, [data, sortConfig]);

  const requestSort = key => {
    setSortConfig(prev => ({
      key,
      direction: prev.key === key && prev.direction === 'asc' ? 'desc' : 'asc'
    }));
  };

  return (
    <table>
      <thead>
        <tr>
          {columns.map(col => (
            <th key={col.key} onClick={() => requestSort(col.key)}>
              {col.title}
              {sortConfig.key === col.key && (
                <span>{sortConfig.direction === 'asc' ? ' ↑' : ' ↓'}</span>
              )}
            </th>
          ))}
        </tr>
      </thead>
      <tbody>{/* 渲染 sortedData */}</tbody>
    </table>
  );
}