React动态添加Tab组件时变量使用触发类型错误，请求解决

错误直接原因 #

你写的toggleState === {this.index}是语法错误：{this.index}会创建一个包含this属性的对象（类型为{ this: any }），而toggleState是数字类型，两者类型不匹配，所以TypeScript抛出类型不重叠的错误。直接去掉对象包裹，写成toggleState === this.index就能解决这个类型问题。

类组件写法的其他问题 #

除了上述语法错误，你的topTab类组件写法还有两处问题：

• React类组件的构造函数第一个参数必须是props，不能直接传入index，索引值需要通过props传递。
• 父组件的toggleState和toggleTab无法直接在类组件中访问，必须通过props传递给子组件。

修正后的类组件写法：

class TopTab extends React.Component<{ 
  index: number; 
  toggleState: number; 
  toggleTab: (index: number) => void 
}> {
  render() {
    const { index, toggleState, toggleTab } = this.props;
    return (
      <button
        className={toggleState === index ? "tabs active-tabs" : "tabs"}
        onClick={() => toggleTab(index)}
      >
        Tab {index}
      </button>
    );
  }
}

更推荐的函数组件写法 #

目前React更推荐使用函数组件，写法更简洁，也更适配Hooks生态：

const TopTab = ({ index, toggleState, toggleTab }: { 
  index: number; 
  toggleState: number; 
  toggleTab: (index: number) => void 
}) => {
  return (
    <button
      className={toggleState === index ? "tabs active-tabs" : "tabs"}
      onClick={() => toggleTab(index)}
    >
      Tab {index}
    </button>
  );
};

完整动态添加Tab实现 #

要实现动态添加Tab，建议用useState管理一个tabs数组（而非仅管理选中索引），逻辑会更清晰：

import { useState } from 'react';

const TopTab = ({ index, toggleState, toggleTab }: { 
  index: number; 
  toggleState: number; 
  toggleTab: (index: number) => void 
}) => {
  return (
    <button
      className={toggleState === index ? "tabs active-tabs" : "tabs"}
      onClick={() => toggleTab(index)}
    >
      Tab {index}
    </button>
  );
};

const TabContainer = () => {
  // 管理tabs列表与选中索引
  const [tabs, setTabs] = useState([1]);
  const [toggleState, setToggleState] = useState(1);

  const toggleTab = (index: number) => {
    setToggleState(index);
  };

  // 添加新Tab逻辑
  const addNewTab = () => {
    const newIndex = Math.max(...tabs) + 1;
    setTabs([...tabs, newIndex]);
    // 可选：自动切换到新创建的Tab
    setToggleState(newIndex);
  };

  return (
    <div>
      {tabs.map(index => (
        <TopTab key={index} index={index} toggleState={toggleState} toggleTab={toggleTab} />
      ))}
      <button onClick={addNewTab}>添加新Tab</button>
      {/* 此处可根据toggleState渲染对应Tab内容 */}
      <div className="tab-content">
        当前选中Tab: {toggleState}
      </div>
    </div>
  );
};

export default TabContainer;

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