React/Material UI根据状态变量条件渲染className报错排查

核心错误原因 #

1. 未定义变量active：你在条件判断里直接写了active，这是一个未声明的变量，应该使用字符串'active'来访问classes对象的对应键。
2. Hook调用位置错误：useNavStyles是Material UI的样式Hook，必须在组件函数内部调用，不能放在组件外部。
3. 状态未传递到子组件：activeView和setActiveView定义在App组件中，NavBar组件无法直接访问，需要通过props传递。
4. 类名拼接逻辑冗余：模板字符串的写法没必要，直接通过三元表达式判断即可。

修正后的代码 #

1. App组件中传递状态

确保将activeView和setActiveView作为props传给NavBar：

// App.tsx
import NavBar from './NavBar';

const App = () => {
  const [activeView, setActiveView] = React.useState(1);
  
  return (
    <div>
      <NavBar activeView={activeView} setActiveView={setActiveView} />
      {/* 其他组件内容 */}
    </div>
  );
};

2. 修正NavBar组件

// NavBar.tsx
import { useNavStyles } from './NavBarStyling';
import { Button } from '@mui/material';

// 定义props类型，确保类型安全
interface NavBarProps {
  activeView: number;
  setActiveView: (id: number) => void;
}

const NavBar = ({ activeView, setActiveView }: NavBarProps) => {
  // 将Hook移到组件内部
  const classes = useNavStyles();
  
  // 示例菜单数据，根据实际情况替换
  const menuItems = [
    { id: 1, label: '首页' },
    { id: 2, label: '设置' },
    { id: 3, label: '关于' }
  ];

  return(
    <div className={classes.nav}>
      {menuItems.map((item) => (
        <Button 
          key={item.id} 
          onClick={() => setActiveView(item.id)}
          // 简化条件类名：匹配时应用active样式，否则为空
          className={activeView === item.id ? classes.active : ''}
        >
          {item.label}
        </Button>
      ))}
    </div>
  )
};

export default NavBar;

样式写法说明 #

你定义了两种样式规则，二选一即可：

• 如果用classes.active（推荐）：直接通过三元表达式绑定即可，Material UI会生成唯一类名，避免样式冲突。
• 如果用& button.active：则className应写为activeView === item.id ? 'active' : ''，但需要确保Button组件最终渲染为原生button标签（Material UI默认是button，若修改了component属性需额外调整）。

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