react element 点击按钮生成可关闭的tab

可以使用React组件库中的Tabs组件，例如Ant Design中的Tabs组件。你可以在点击按钮时，动态地在Tabs组件中添加一个新的Tab，并渲染对应的内容。同时，为了实现可关闭的Tab，你可以在每个Tab右侧添加一个关闭按钮，当点击该按钮时，你可以将该Tab从Tabs组件中移除。以下是一个简单的示例代码：

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

const { TabPane } = Tabs;

function App() {
  const [panes, setPanes] = useState([]);
  const [activeKey, setActiveKey] = useState('');

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

  const add = () => {
    const key = `newTab${Date.now()}`;
    const newPanes = [...panes];
    newPanes.push({ title: 'New Tab', content: 'New Tab Content', key });
    setPanes(newPanes);
    setActiveKey(key);
  };

  const remove = (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 && newActiveKey === targetKey) {
      if (lastIndex >= 0) {
        newActiveKey = newPanes[lastIndex].key;
      } else {
        newActiveKey = newPanes[0].key;
      }
    }
    setPanes(newPanes);
    setActiveKey(newActiveKey);
  };

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

export default App;

在上面的代码中，我们首先引入了Ant Design中的Tabs组件，并使用useState钩子来维护当前所有Tab的状态。在点击“Add Tab”按钮时，我们会动态地添加一个新的Tab，并将其加入到状态中。同时，我们将activeKey设置为新Tab的key，以便在添加后立即切换到新Tab。

在Tabs组件中，我们使用了type="editable-card"来启用可关闭的Tab功能。在每个Tab上，我们设置了closable属性来显示关闭按钮。当点击关闭按钮时，我们会调用onEdit方法来移除该Tab。在移除Tab时，我们需要同时更新activeKey，以确保始终有一个Tab处于激活状态。