嘿，这个问题其实很常见——当你切换Tab时，第一个Tab组件会被卸载，它内部的状态自然就丢失了。要解决这个问题，核心思路就是把下拉菜单的状态提升到Tab容器的父组件中管理，这样不管Tab怎么切换，状态都保存在父组件里，不会被销毁。下面给你一个纯类组件的基础React实现，完全不需要Redux或者Hooks：

完整代码示例 #

父组件（Tab容器） #

import React, { Component } from 'react';
import DropdownTab from './DropdownTab';
import EmptyTab from './EmptyTab';

class TabContainer extends Component {
  constructor(props) {
    super(props);
    // 父组件持有两个状态：当前激活的Tab，以及下拉菜单选中的值
    this.state = {
      activeTab: 1,
      dropdownValue: '' // 初始化下拉值为空
    };
  }

  // 切换Tab的方法
  switchTab = (tabNumber) => {
    this.setState({ activeTab: tabNumber });
  };

  // 更新下拉值的方法，传给子组件调用
  handleDropdownChange = (event) => {
    this.setState({ dropdownValue: event.target.value });
  };

  render() {
    const { activeTab, dropdownValue } = this.state;
    return (
      <div>
        {/* Tab切换按钮 */}
        <button onClick={() => this.switchTab(1)} disabled={activeTab === 1}>
          Tab 1（下拉菜单）
        </button>
        <button onClick={() => this.switchTab(2)} disabled={activeTab === 2}>
          Tab 2（空内容）
        </button>

        {/* 根据激活的Tab渲染对应组件 */}
        {activeTab === 1 && (
          <DropdownTab 
            value={dropdownValue} 
            onChange={this.handleDropdownChange} 
          />
        )}
        {activeTab === 2 && <EmptyTab />}
      </div>
    );
  }
}

export default TabContainer;

第一个Tab组件（带下拉菜单） #

import React, { Component } from 'react';

class DropdownTab extends Component {
  render() {
    // 从props中接收父组件传来的值和更新方法
    const { value, onChange } = this.props;
    return (
      <div style={{ marginTop: '20px' }}>
        <label>选择选项：</label>
        <select value={value} onChange={onChange}>
          <option value="">请选择</option>
          <option value="option1">选项1</option>
          <option value="option2">选项2</option>
          <option value="option3">选项3</option>
        </select>
        {value && <p>你选中了：{value}</p>}
      </div>
    );
  }
}

export default DropdownTab;

第二个Tab组件（空内容） #

import React, { Component } from 'react';

class EmptyTab extends Component {
  render() {
    return <div style={{ marginTop: '20px' }}>这是第二个Tab，暂无内容</div>;
  }
}

export default EmptyTab;

关键原理说明 #

• 状态提升：把原本属于DropdownTab的下拉值状态，移到了它的父组件TabContainer中。父组件的状态不会因为子组件（Tab）的卸载而丢失，所以切换Tab后回来，选中的值依然存在。
• 受控组件：DropdownTab变成了受控组件，它的下拉值完全由父组件传入的value控制，用户选择时通过onChange回调通知父组件更新状态，保证了数据的一致性。
• 灵活扩展：如果第一个Tab有多个下拉菜单，只需要在父组件中添加对应的状态变量（比如dropdownValue2、dropdownValue3），并把对应的value和onChange传给子组件即可，原理完全相同。

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