semantic-ui-react垂直Tabs问题：点击选中后面板内容未加载

嘿，我之前也碰到过Semantic UI React垂直Tabs面板不切换的坑，大概率是你自定义panes的时候没踩对组件的要求点。咱们一步步来排查和解决：

1. 先检查panes的核心格式（最常见原因！） #

Semantic UI React的Tabs组件要求每个pane对象必须包含menuItem和render两个核心属性，而且**render必须是一个返回Tab.Pane的函数**，不能直接写JSX。

很多人容易犯这个错：把render直接赋值为JSX元素，而不是函数，这会导致组件初始化时就渲染所有面板，切换标签时不会重新触发渲染。

正确格式示例： #

const panes = [
  {
    menuItem: '自定义标签1',
    // render是返回Tab.Pane的函数
    render: () => <Tab.Pane>标签1的面板内容</Tab.Pane>,
  },
  {
    menuItem: '自定义标签2',
    render: () => <Tab.Pane>标签2的面板内容</Tab.Pane>,
  },
];

错误格式（别这么写！）： #

// 这种写法会导致面板内容不切换
const panes = [
  {
    menuItem: '自定义标签1',
    // 直接传JSX，不是函数
    render: <Tab.Pane>标签1的面板内容</Tab.Pane>,
  },
];

2. 检查受控状态的逻辑（如果手动管理activeIndex） #

如果你手动控制了Tabs的activeIndex和onTabChange，要确保状态更新逻辑是正确的。比如用useState来管理选中索引，并且在切换时正确更新：

import { useState } from 'react';
import { Tabs, Tab } from 'semantic-ui-react';

const MyTabs = () => {
  const [activeIndex, setActiveIndex] = useState(0);
  
  const panes = [/* 你的自定义panes */];

  return (
    <Tabs
      vertical
      activeIndex={activeIndex}
      // 切换时更新状态
      onTabChange={(e, { activeIndex }) => setActiveIndex(activeIndex)}
      panes={panes}
    />
  );
};

如果不需要受控模式，直接去掉activeIndex和onTabChange，让组件自己管理状态即可。

3. 排查自定义面板组件的问题 #

如果你的面板内容是复杂的自定义组件，要确保组件没有缓存导致不更新的情况：

• 如果你用了React.memo包裹自定义组件，检查依赖项是否正确，确保组件能响应props变化。
• 给每个Tab.Pane加上唯一的key属性，帮助React识别不同的面板。

完整的可运行示例 #

这里给你一个替换自定义panes后的完整垂直Tabs代码，你可以参考：

import React from 'react';
import { Tabs, Tab } from 'semantic-ui-react';

const CustomVerticalTabs = () => {
  const panes = [
    {
      menuItem: '用户管理',
      render: () => (
        <Tab.Pane key="user-tab">
          <h3>用户列表</h3>
          <p>这里是自定义的用户管理面板内容</p>
        </Tab.Pane>
      ),
    },
    {
      menuItem: '权限设置',
      render: () => (
        <Tab.Pane key="permission-tab">
          <h3>权限配置</h3>
          <p>这里是自定义的权限设置面板内容</p>
        </Tab.Pane>
      ),
    },
    {
      menuItem: '日志查看',
      render: () => (
        <Tab.Pane key="log-tab">
          <h3>系统日志</h3>
          <p>这里是自定义的日志查看面板内容</p>
        </Tab.Pane>
      ),
    },
  ];

  return <Tabs vertical panes={panes} />;
};

export default CustomVerticalTabs;

先从检查render是否为函数开始排查，这是90%的情况会出现的问题，应该能解决你的面板不切换的问题！

内容的提问来源于stack exchange，提问作者w13rfed