React可复用组件条件类实现：IconButton动态切换className

嘿，这事儿超简单！你只需要根据传入的isLink属性，在组件里动态选择对应的样式类就行。我给你两种实现方式，选你觉得顺手的来：

方式一：先赋值变量再使用（可读性更高） #

把样式类的判断逻辑抽成一个变量，代码看起来更清爽：

const CMAppBarIcon = (props) => {
  // 根据isLink属性判断要使用的样式类
  const activeClass = props.isLink === "true" 
    ? props.classes.linkicon 
    : props.classes.appbaricon;
  
  return (
    <IconButton className={activeClass} disableRipple>
      {props.children}
    </IconButton>
  );
};

方式二：直接在JSX中写三元表达式（更简洁） #

如果不想额外加变量，也可以直接把判断逻辑嵌在className属性里：

const CMAppBarIcon = (props) => {
  return (
    <IconButton 
      className={props.isLink === "true" ? props.classes.linkicon : props.classes.appbaricon} 
      disableRipple
    >
      {props.children}
    </IconButton>
  );
};

小提示 #

注意你现在传入的isLink是字符串类型的"true"，如果之后改成布尔值（比如isLink={true}），只需要把判断条件改成props.isLink就行，不用再和字符串比较啦。

另外，如果之后你想同时保留基础样式+叠加修改样式（比如appbaricon的基础样式不变，只在isLink时加linkicon的hover效果），可以用模板字符串拼接：

className={`${props.classes.appbaricon} ${props.isLink === "true" ? props.classes.linkicon : ""}`}

不过按照你当前的需求，直接替换样式类就完全够用——因为两个样式里的&:hover是互斥的，替换后就能精准覆盖默认的光标样式。

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