Как написать Вложенный, если еще в реагировать JS

Question

Я пытаюсь внедрить вложенный элемент в реагирующий составной слайдер.Я могу написать, если еще с помощью троичного оператора, и это работает нормально

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

, поэтому здесь я могу проверить только условие, больше или меньше, чем 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
}

как я могу внедрить эту вещь в мой код jsx.

Заранее спасибо.

Answer 1

Определите функцию в вашем файле помощника или утилиты. Вы также можете определить функцию в своем классе, но обычно для этого рекомендуется использовать вспомогательный файл.

Таким образом, вы можете иметь функцию 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;
  }
};

После этого вы можете использовать эту функцию, чтобы получить класс для вашего Track компонента.

<div className={this.getTrackClass(source.value)}>
   <Track
     key={id}
     source={source}
     target={target}
     getTrackProps={getTrackProps}
     />
</div>

Answer 2

Это то, что вы пытаетесь достичь?

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

Answer 3

Используйте пакет с именем classNames в вашем приложении.

https://www.npmjs.com/package/classnames

Это даст вам гибкость в использовании нескольких классов, но также позволит вам использовать классы условно в более удобочитаемом виде.