如何将isLoading常量加入MenuButton组件className的条件判断语句？

问题原因 #

你的写法未生效是因为JavaScript中&&运算符优先级高于||，你写的逻辑实际等价于：
(!isLoading && !firstTimeOnOnboarding) || selectedTemplatesIds.length >= minNumOfOptions
加载状态下!isLoading为false，但只要选中的模板数量达标，就会命中蓝色样式的判断，完全没有把加载状态作为最高优先级的判断条件。

正确实现方案 #

你需要先把加载状态作为最高优先级判断，同时补充disabled属性实现阻止点击的效果：

// 先确保你的样式文件里已经定义了加载态对应的类名 actionLoading，设置你要的按钮颜色
<MenuButton
  className={
    isLoading 
      ? styles.actionLoading
      : (!firstTimeOnOnboarding || selectedTemplatesIds.length >= minNumOfOptions)
        ? styles.actionBlue
        : styles.actionNormal
  }
  disabled={isLoading}
>
  {buttonText}
</MenuButton>

如果你不需要单独的加载态样式，要求加载时直接用普通样式actionNormal，可以简化为：

className={
  !isLoading && (!firstTimeOnOnboarding || selectedTemplatesIds.length >= minNumOfOptions)
    ? styles.actionBlue
    : styles.actionNormal
}

注意必须给原有的业务判断条件!firstTimeOnOnboarding || selectedTemplatesIds.length >= minNumOfOptions加括号，才能保证逻辑符合预期。

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