React多同类组件场景下如何为单个组件设置独立state

你当前把激活状态存在了整个Navbar组件共用的单个布尔值isActive上，三个选项卡都读取这同一个状态，只要isActive变化，所有选项卡的class都会同步更新，自然无法实现单个选项卡的独立状态控制。
另外你现在用的是React函数组件+Hook的写法，这个场景下完全不需要用到this，this相关的绑定逻辑只在类组件中需要处理，函数组件靠闭包访问状态和方法，不存在this指向问题，强行写this反而会触发undefined报错。

导航栏选项卡通常有两种交互逻辑，按需选择即可：

方案1：常规互斥激活（同一时间只有一个选项卡高亮，绝大多数导航栏/Tab栏用这个逻辑） #

不要存布尔值，改成存当前激活选项卡的唯一标识（选项卡名称、索引都可以），渲染每个选项卡时判断自身标识和激活状态是否一致，匹配就加激活class，点击时把激活状态更新为当前选项卡的标识即可。
完整代码如下：

import { useState } from 'react';
// NavStyled等其他导入内容省略

const Navbar = () => {
  // 默认激活第一个Basic选项卡
  const [activeTab, setActiveTab] = useState('Basic');

  return (
    <NavStyled>
      <div className="navbar-div">
        <nav className="nav">
          <p 
            className={activeTab === 'Basic' ? 'true' : 'false'} 
            onClick={() => setActiveTab('Basic')}
          >
            Basic
          </p>
          <p 
            className={activeTab === 'Social' ? 'true' : 'false'}  
            onClick={() => setActiveTab('Social')}
          >
            Social
          </p>
          <p 
            className={activeTab === 'Certificates' ? 'true' : 'false'} 
            onClick={() => setActiveTab('Certificates')}
          >
            Certificates
          </p>
        </nav>
      </div>
    </NavStyled>
  );
};

export default Navbar;

方案2：独立切换（每个选项卡可以单独控制激活/取消，类似多选标签场景） #

如果需要每个选项卡的状态完全独立、互不影响，就用对象存储所有选项卡的激活状态，点击时只更新对应选项卡的状态值即可：

import { useState } from 'react';
// NavStyled等其他导入内容省略

const Navbar = () => {
  const [tabStatus, setTabStatus] = useState({
    Basic: false,
    Social: false,
    Certificates: false
  });

  const toggleTab = (tabName) => {
    setTabStatus(prev => ({
      ...prev,
      [tabName]: !prev[tabName]
    }));
  };

  return (
    <NavStyled>
      <div className="navbar-div">
        <nav className="nav">
          <p 
            className={tabStatus.Basic ? 'true' : 'false'} 
            onClick={() => toggleTab('Basic')}
          >
            Basic
          </p>
          <p 
            className={tabStatus.Social ? 'true' : 'false'}  
            onClick={() => toggleTab('Social')}
          >
            Social
          </p>
          <p 
            className={tabStatus.Certificates ? 'true' : 'false'} 
            onClick={() => toggleTab('Certificates')}
          >
            Certificates
          </p>
        </nav>
      </div>
    </NavStyled>
  );
};

export default Navbar;

你原代码里封装的setName函数属于多余逻辑，直接在className属性上写判断表达式即可，不需要额外套一层函数，反而增加维护成本。

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