当前位置：首页 > React

react实现表格切换

2026-01-27 04:46:30React

React 表格切换实现方法

在 React 中实现表格切换功能通常涉及状态管理和条件渲染。以下是几种常见的方法：

使用状态控制显示表格

通过 useState 钩子管理当前显示的表格，切换时更新状态。

import React, { useState } from 'react';

function TableSwitcher() {
  const [activeTable, setActiveTable] = useState('table1');

  return (
    <div>
      <button onClick={() => setActiveTable('table1')}>显示表格1</button>
      <button onClick={() => setActiveTable('table2')}>显示表格2</button>

      {activeTable === 'table1' && (
        <table>
          {/* 表格1内容 */}
        </table>
      )}

      {activeTable === 'table2' && (
        <table>
          {/* 表格2内容 */}
        </table>
      )}
    </div>
  );
}

使用组件切换

将不同表格封装为独立组件，根据条件渲染不同组件。

function Table1() {
  return <table>{/* 表格1内容 */}</table>;
}

function Table2() {
  return <table>{/* 表格2内容 */}</table>;
}

function TableSwitcher() {
  const [activeTable, setActiveTable] = useState(<Table1 />);

  return (
    <div>
      <button onClick={() => setActiveTable(<Table1 />)}>表格1</button>
      <button onClick={() => setActiveTable(<Table2 />)}>表格2</button>
      {activeTable}
    </div>
  );
}

使用路由切换

对于更复杂的应用，可以使用 React Router 实现表格切换。

import { BrowserRouter as Router, Route, Link } from 'react-router-dom';

function Table1() {
  return <table>{/* 表格1内容 */}</table>;
}

function Table2() {
  return <table>{/* 表格2内容 */}</table>;
}

function App() {
  return (
    <Router>
      <Link to="/table1">表格1</Link>
      <Link to="/table2">表格2</Link>

      <Route path="/table1" component={Table1} />
      <Route path="/table2" component={Table2} />
    </Router>
  );
}

动态表格内容切换

保持表格结构不变，仅切换内容数据。

function TableSwitcher() {
  const [data, setData] = useState(table1Data);

  return (
    <div>
      <button onClick={() => setData(table1Data)}>加载数据1</button>
      <button onClick={() => setData(table2Data)}>加载数据2</button>

      <table>
        <thead>
          <tr>
            <th>列1</th>
            <th>列2</th>
          </tr>
        </thead>
        <tbody>
          {data.map((row) => (
            <tr key={row.id}>
              <td>{row.col1}</td>
              <td>{row.col2}</td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}

使用 Tab 组件实现切换

结合 UI 库如 Material-UI 的 Tab 组件实现更美观的切换效果。

react实现表格切换

import { Tabs, Tab } from '@material-ui/core';

function TableSwitcher() {
  const [value, setValue] = useState(0);

  return (
    <div>
      <Tabs value={value} onChange={(e, newValue) => setValue(newValue)}>
        <Tab label="表格1" />
        <Tab label="表格2" />
      </Tabs>

      {value === 0 && (
        <table>{/* 表格1内容 */}</table>
      )}

      {value === 1 && (
        <table>{/* 表格2内容 */}</table>
      )}
    </div>
  );
}