Reactjs 如何在react js中编写嵌套if-else

我试图在react复合滑块中实现嵌套的if-else。 我能用三元运算符写if-else，这很好

<div className={source.value >.3 ? 'greater': 'lesser'}>
   <Track
     key={id}
     source={source}
     target={target}
     getTrackProps={getTrackProps}
     />
</div>

.3？“较大“：“较小”}>

所以在这里，我只能检查条件是否大于.3或小于，但我正在尝试实现

if(source.value <.3)
{
return classNameFirst
}
else if (source.value >.3 && source.value <.7){
return classnameSecond
}
else if (source.value >.7 && source.value <.9){
return classnamethird
}
else if (source.value >.9 && source.value <1.2){
return classnameFourth
}
else{
return classnamefive
}

---

if（source.value.3&&source.value.7&&source.value.9&&source.value在应用程序中使用名为classNames的包


这将为您提供使用多个类的灵活性，但也允许您以更可读的方式有条件地使用类。
在应用程序中使用名为classNames的包


这将为您提供使用多个类的灵活性，但也将允许您以更可读的方式有条件地使用类。
这就是您试图实现的目标吗

return(
  source.value < .3 ?
    classNameFirst
  : source.value < .7 ?
      classNameSecond
      : source.value < .9 ?
          classNameThird
          : source.value < 1.2 ?
              classNameFourth
              : classNameFive
);

返回(
来源.价值<.3？
类名优先
：source.value<.7？
类名称秒
：source.value<.9？
类名第三
：source.value<1.2？
类名第四
：类名五
);
这就是你想要实现的目标吗

return(
  source.value < .3 ?
    classNameFirst
  : source.value < .7 ?
      classNameSecond
      : source.value < .9 ?
          classNameThird
          : source.value < 1.2 ?
              classNameFourth
              : classNameFive
);

返回(
来源.价值<.3？
类名优先
：source.value<.7？
类名称秒
：source.value<.9？
类名第三
：source.value<1.2？
类名第四
：类名五
);
在助手或实用程序文件中定义函数。您也可以在类本身中定义函数，但通常最好使用助手文件

因此，您可以使用一个函数
getTrackClass
，它将接受
source.value
作为参数，并返回相应的类

getTrackClass = value => {
  if (value < 0.3) {
    return classNameFirst;
  } else if (value > 0.3 && value < 0.7) {
    return classnameSecond;
  } else if (value > 0.7 && value < 0.9) {
    return classnamethird;
  } else if (value > 0.9 && value < 1.2) {
    return classnameFourth;
  } else {
    return classnamefive;
  }
};

在帮助程序或实用程序文件中定义函数。您也可以在类本身中定义函数，但通常使用帮助程序文件是一个好主意

因此，您可以使用一个函数
getTrackClass
，它将接受
source.value
作为参数，并返回相应的类

getTrackClass = value => {
  if (value < 0.3) {
    return classNameFirst;
  } else if (value > 0.3 && value < 0.7) {
    return classnameSecond;
  } else if (value > 0.7 && value < 0.9) {
    return classnamethird;
  } else if (value > 0.9 && value < 1.2) {
    return classnameFourth;
  } else {
    return classnamefive;
  }
};

你不能直接将if/elses放入JSX，但你可以用ternaries重新创建相同的逻辑。但是，最好不要像那样内联一堆逻辑，它会混淆逻辑和视图代码，并且变得混乱。只要有一个确定哪个类名合适的函数，然后有
或类似的东西，你不能直接放入if/elses到JSX，但您可以用ternaries重新创建相同的逻辑。但是，最好不要内联一堆这样的逻辑，它会混淆逻辑和视图代码，并变得混乱。只需使用一个函数来确定哪个类名是合适的，然后使用
或类似的东西