Reactjs 使用三元运算符进行内嵌样式设置>；2具有React js的条件

我有一个映射的数据数组，我想根据数组中每个对象的两个项目的比较，将卡片元素设置为三种颜色之一。代码如下所示：

data.map(item => {
 return (
  //some code
  <Card className={
   item.someNumber > item.anotherNumber*1.05 ?
   classes.orange :
   item.someNumber < item.anotherNumber*.95 ?
   classes.blue :
   classes.grey}
   >
  //more code

data.map（项=>{
返回(
//一些代码
项目。另一个编号*1.05？
橙色：
item.someNumber
//更多代码

---

这似乎有效（即我所有的卡片都按预期上色），但我的问题是，这是“错误代码”吗？我真的找不到一个明确的答案或类似的解决方案（可能我问的问题不对）；我确实尝试过在呈现的代码上方使用if/else语句创建函数，但由于我们是如何映射数据的，而且颜色是基于数组中每个对象的比较的，因此我不知道如何使其他操作正常。

您还可以创建一个包含类名l的函数然后在元素的className属性中调用它。参见示例：

const classLogic = () => {
  if (someCondition == true) {
    return "class-1";
  } else {
    return "class-2";
  }
};

<Card className={classLogic()} ></Card>

const classLogic=（）=>{
if（someCondition==true）{
返回“一级”；
}否则{
返回“二级”；
}
};

在这种情况下，我认为这取决于偏好和可读性。如果你是唯一一个在这个项目上工作的人，并且你发现嵌套的三元结构很容易推理，我认为你发布的代码是表达这种逻辑的简洁方式

就我个人而言，我发现嵌套三元组很难阅读，因此，即使它需要几行代码，我也会找到一种不同的方式来表达这种逻辑

以下是您可能需要考虑的几种备选解决方案：

将选择逻辑移到道具之外

data.map（项=>{
让className=classes.grey；
如果（item.someNumber>item.anotherNumber*1.05）{
className=classes.orange；
}else if（item.someNumber

将选择逻辑移动到函数

const getClassName=item=>{
如果（item.someNumber>item.anotherNumber*1.05）{
返回类。橙色；
}else if（item.someNumber{
返回(
//一些代码
//更多代码
})

在我看来，您列出的3个案例可能是相互排斥的（即，前两个条件不可能同时为真），在这种情况下，您可以使用类似于帮助器库的方法来执行此逻辑

从“classnames”导入cx；
data.map（项=>{
常量类名称={
[classes.orange]：item.someNumber>item.anotherNumber*1.05，
[classes.blue]：item.someNumber[classes.grey]：item.someNumber>=item.anotherNumber*.95&&item.someNumber我使用此库有条件地将类名连接在一起
https://github.com/JedWatson/classnames
。使用此选项，您可以去掉锅炉板代码（如果您创建了另一个返回className的函数）你只需要关注条件和类名。
你说。在我看来，任何超过两个大小写的三元运算符都不利于可读性。为什么不编写一个包含这种逻辑的方法（以更可读的方式）并返回正确的类名？@PrateekThapa实际上我是唯一一个阅读此代码的人，因此，如果可读性是唯一的潜在问题，那么我可以接受它的现状。@AndréFrings问题之一是，我返回了多张包含数组中不同数据段的卡，因此尝试按照您建议的方式编写一个方法st变得很棘手（我尝试了几个小时）。这实际上是我最初尝试的，但实际上我有6张卡，每个卡返回不同的数据片段，并且有不同的样式要求（我知道，很烦人；）.但是谢谢你的建议！谢谢你所有的建议！我是唯一一个研究这段代码的人，而且，可能是因为我有一个奇怪的大脑，我不觉得三元运算符中的多个条件很难理解。：）但我会考虑其他的选择——主要是，我只是想确保我没有编写最终会破坏某些东西的代码。再次感谢！
data.map(item => {
 let className = classes.grey;
 if (item.someNumber > item.anotherNumber*1.05) {
  className = classes.orange;
 } else if (item.someNumber < item.anotherNumber*.95) {
  className = classes.blue;
 }

 return (
  //some code
  <Card className={className}>
  //more code
})

const getClassName = item => {
 if (item.someNumber > item.anotherNumber*1.05) {
  return classes.orange;
 } else if (item.someNumber < item.anotherNumber*.95) {
  return classes.blue;
 } else {
  return classes.grey;
 }
};

data.map(item => {
 return (
  //some code
  <Card className={getClassName(item)}>
  //more code
})

import cx from 'classnames';

data.map(item => {
 const className = {
  [classes.orange]: item.someNumber > item.anotherNumber*1.05,
  [classes.blue]: item.someNumber < item.anotherNumber*.95,
  [classes.grey]: item.someNumber >= item.anotherNumber*.95 && item.someNumber <= item.anotherNumber*1.05
 };

 return (
  //some code
  <Card className={cx(className)}>
  //more code
})