react antd后台管理系统实现动态标签页

使用React和Ant Design可以轻松实现后台管理系统的动态标签页功能。以下是一个简单的示例：

首先，安装React和Ant Design:

npm install react antd

创建一个新的React组件，例如TabsPage:

import React, { useState } from 'react';
import { Tabs } from 'antd';

const { TabPane } = Tabs;

const TabsPage = () => {
  const [activeKey, setActiveKey] = useState('1');
  const [panes, setPanes] = useState([
    { title: 'Tab 1', content: 'Content of Tab 1', key: '1' },
  ]);

  const onChange = (activeKey) => {
    setActiveKey(activeKey);
  };

  const onEdit = (targetKey, action) => {
    if (action === 'remove') {
      removeTab(targetKey);
    }
  };

  const addTab = () => {
    const newKey = String(panes.length + 1);
    const newPane = { title: `Tab ${newKey}`, content: `Content of Tab ${newKey}`, key: newKey };
    setPanes([...panes, newPane]);
    setActiveKey(newKey);
  };

  const removeTab = (targetKey) => {
    let newActiveKey = activeKey;
    let lastIndex;
    panes.forEach((pane, index) => {
      if (pane.key === targetKey) {
        lastIndex = index - 1;
      }
    });
    const newPanes = panes.filter((pane) => pane.key !== targetKey);
    if (newPanes.length && activeKey === targetKey) {
      if (lastIndex >= 0) {
        newActiveKey = newPanes[lastIndex].key;
      } else {
        newActiveKey = newPanes[0].key;
      }
    }
    setPanes(newPanes);
    setActiveKey(newActiveKey);
  };

  return (
    <div>
      <Tabs
        activeKey={activeKey}
        onChange={onChange}
        tabBarExtraContent={<button onClick={addTab}>Add Tab</button>}
        type="editable-card"
        onEdit={onEdit}
      >
        {panes.map((pane) => (
          <TabPane tab={pane.title} key={pane.key}>
            {pane.content}
          </TabPane>
        ))}
      </Tabs>
    </div>
  );
};

export default TabsPage;

在你的主应用程序中使用TabsPage组件:

import React from 'react';
import ReactDOM from 'react-dom';
import TabsPage from './TabsPage';

ReactDOM.render(
  <React.StrictMode>
    <TabsPage />
  </React.StrictMode>,
  document.getElementById('root')
);

这样，你就可以在后台管理系统中实现动态标签页的功能。用户可以点击"Add Tab"按钮来添加新的标签页，并且可以通过关闭按钮来移除标签页。每个标签页都有自己独立的内容。你可以根据自己的需求来自定义标签页的内容和样式。