React AntD框架巧妙实现表格数据更新，多tab页面轻松驾驭

2023-05-20 14:21:19

在 React 和 Ant Design 中巧妙实现多 Tab 页签数据共享的解决方案

随着 React 和 Ant Design 框架在前端开发中的普及，开发者们经常需要面对各种复杂的挑战。其中一个常见的难题是如何在多 Tab 页签中共享一个标题相同的表格，并确保在切换 Tab 页签时数据能够及时更新。

创建独立的表格组件

首先，我们需要一个能够独立存在的 Table 组件，它负责渲染表头和表体，并从父组件接收数据。以下是该组件的代码示例：

import React from 'react';
import { Table } from 'antd';

const TableComponent = ({ columns, data }) => {
  return (
    <Table
      columns={columns}
      dataSource={data}
      pagination={false}
    />
  );
};

export default TableComponent;

构建 Tab 切换组件

接下来，我们需要构建一个 Tab 切换组件来管理多个 Tab 页签和相应的表格。该组件需要维护一个当前激活的 Tab 页签，并根据该 Tab 页签渲染对应的表格。

import React, { useState } from 'react';
import { Tabs, TabPane } from 'antd';
import TableComponent from './TableComponent';

const TabComponent = () => {
  const [activeKey, setActiveKey] = useState('tab1');
  const tabsData = [
    {
      key: 'tab1',
      title: 'Tab 1',
      data: [
        {
          name: 'John Doe',
          age: 30,
          address: '123 Main Street'
        },
        // ...
      ],
    },
    // ...
  ];

  const handleChange = (key) => {
    setActiveKey(key);
  };

  return (
    <Tabs activeKey={activeKey} onChange={handleChange}>
      {tabsData.map((tab) => (
        <TabPane tab={tab.title} key={tab.key}>
          <TableComponent columns={tab.columns} data={tab.data} />
        </TabPane>
      ))}
    </Tabs>
  );
};

export default TabComponent;

在主组件中使用 Tab 切换组件

最后，在主组件中，我们可以使用 Tab 组件来渲染整个页面。这样，当用户切换 Tab 页签时，表格中的数据也会随之更新。

import React from 'react';
import TabComponent from './TabComponent';

const App = () => {
  return (
    <div>
      <TabComponent />
    </div>
  );
};

export default App;