React + Ant Design Tabs组件：如何通过Tab内按钮点击修改当前激活Tab的标题

阿华AIGC实验室

2026-4-14

我来帮你解决这个问题，核心在于让Tabs组件变成受控组件，通过React状态来管理Tab项的内容，这样修改状态就能实时更新UI，而不会被React的渲染机制覆盖。你之前尝试直接操作DOM或者用全局变量的方式无效，本质是因为没有触发React的重新渲染，或者修改的内容被React的虚拟DOM同步给覆盖了。

下面是具体的解决方案，我们一步步来调整你的代码：

1. 重构TabHandler组件，转为受控组件

我们需要把Tab的items和activeKey都放到组件的状态里，这样状态更新时组件会自动重新渲染，并且能正确反映最新的Tab标题。

修改后的TabHandler.jsx代码如下：

/* Assets/TabHandler.jsx */
import React, { useState } from 'react';
import { Tabs } from 'antd';
import type { TabsProps } from 'antd';

const TabHandler: React.FC = () => {
  // 初始化状态：activeKey和items数组
  const [activeKey, setActiveKey] = useState<string>('1');
  const [items, setItems] = useState<TabsProps['items']>([
    {
      key: '1',
      label: 'Test',
      children: <button id="test" onClick={handleButtonClick}>点击修改标题</button>,
    },
  ]);

  // Tab切换时更新activeKey
  const onChange = (key: string) => {
    console.log(key);
    setActiveKey(key);
  };

  // 按钮点击事件：修改当前激活Tab的标题
  const handleButtonClick = () => {
    // 不可变更新items数组，避免直接修改原状态
    const updatedItems = items.map(item => {
      if (item.key === activeKey) {
        // 找到当前激活的Tab，修改它的label
        return { ...item, label: 'Test Complete' };
      }
      return item;
    });
    // 更新状态，触发组件重新渲染
    setItems(updatedItems);
  };

  return <Tabs activeKey={activeKey} items={items} onChange={onChange} />;
};

export default TabHandler;

2. 修正App.jsx中的小错误

你原来的代码里用了webViewRoot.render，但实际创建的根是Root，这里需要修正：

/* app.jsx */
import { createRoot } from 'react-dom/client';
import React from 'react';
import TabHandler from "./Assets/TabHandler.jsx";

const rootElement = document.getElementById('root');
if (!rootElement) throw new Error('Root element not found');
const Root = createRoot(rootElement);
Root.render(<TabHandler />);