react实现表格切换
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 组件实现更美观的切换效果。
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>
);
}注意事项
- 为表格行添加唯一的
key属性以提高性能 - 考虑使用 useMemo 优化大型表格的渲染性能
- 对于动态数据，确保数据更新时组件能正确重新渲染
- 在切换表格时考虑动画过渡效果提升用户体验
以上方法可根据具体需求选择或组合使用，简单场景使用状态控制即可，复杂应用可考虑路由或组件化方案。
