Question

我正在尝试在react compound滑块中实现嵌套（如果不是）。如果能够使用三元运算符，我就能写出来，并且工作正常

<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

在应用程序中使用名为classNames的包。

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

这将为您提供使用多个类的灵活性，但也将允许您以更具可读性的方式有条件地使用类。

Answer 3

这是您要完成的事情吗？

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

如何在React JS中编写嵌套

3 个答案: