当前位置：首页 > React

react多表格如何

2026-01-23 21:24:48React

React 多表格的实现方法

在 React 中实现多表格可以通过多种方式完成，具体取决于需求复杂度和数据结构。以下是几种常见的方法：

动态渲染表格 通过数组映射动态生成多个表格，适用于表格结构相似但数据源不同的场景。使用 map 方法遍历数据数组，为每个数据集渲染独立的表格组件。

const tablesData = [
  { id: 1, data: [...], title: 'Table 1' },
  { id: 2, data: [...], title: 'Table 2' }
];

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

可复用表格组件 创建可配置的表格组件，通过 props 传递不同参数实现多表格。这种方式适合需要统一风格但内容不同的场景。

function CustomTable({ columns, data, title }) {
  return (
    <div className="table-wrapper">
      <h2>{title}</h2>
      <table>
        <thead><tr>{columns.map(col => <th key={col}>{col}</th>)}</tr></thead>
        <tbody>
          {data.map((row, i) => (
            <tr key={i}>
              {columns.map(col => <td key={col}>{row[col]}</td>)}
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}

带状态管理的表格 使用状态管理工具（如 Redux 或 Context API）处理多表格间的数据交互。当表格之间存在数据联动时特别有效。

const TableContext = createContext();

function TableProvider({ children }) {
  const [tables, setTables] = useState([]);
  // 状态管理逻辑...
  return (
    <TableContext.Provider value={{ tables, setTables }}>
      {children}
    </TableContext.Provider>
  );
}

响应式表格布局 结合 CSS Grid 或 Flexbox 实现多表格的响应式布局，确保在不同屏幕尺寸下的显示效果。

.table-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
}

性能优化技巧 对于大型数据集使用虚拟滚动（react-window）或分页加载，避免同时渲染大量 DOM 节点影响性能。

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

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

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

表格交互功能 实现排序、筛选、行选择等交互功能时，建议为每个表格维护独立的状态，避免相互干扰。

react多表格如何

function SortableTable({ data }) {
  const [sortConfig, setSortConfig] = useState(null);

  const sortedData = useMemo(() => {
    // 排序逻辑...
  }, [data, sortConfig]);

  const requestSort = (key) => {
    // 更新排序配置...
  };

  return (
    <table>
      {/* 表头添加排序按钮 */}
      <thead>
        <tr>
          {Object.keys(data[0]).map(key => (
            <th key={key} onClick={() => requestSort(key)}>
              {key}
            </th>
          ))}
        </tr>
      </thead>
      {/* 渲染排序后的数据 */}
    </table>
  );
}