Wie kann ich verschachtelte ternäre Ausdrücke in meinem Code vermeiden?

Question

Ich habe Code wie folgt. Wie kann ich es mit einer funktionalen Programmierung in JavaScript sauberer und eleganter schreiben? Ich möchte verschachtelte ternäre Ausdrücke loswerden. Irgendwelche Ideen?

props => ({ 
      iconColor: props.isPriority ? (props.isCompleted ? variables.color.lightpurple : variables.color.purple) : variables.color.gray3, 
      iconName: props.isPriority ? 'star-full' : 'star-empty', 
      })) 

Dies ist Rest des Code:

EDIT:

const enhance: React$HOC<*, InitialProps> = compose(
     withProps(props => ({ 
     iconColor: props.isPriority ? (props.isCompleted ? variables.color.lightpurple : variables.color.purple) : variables.color.gray3, 
     iconName: props.isPriority ? 'star-full' : 'star-empty', 
     })) 
    ) 

Answer 1

Ja, aber mein Linter ist nicht glücklich: 44:16 error Do not nest ternary expressions [no-nested-ternary]

Wenn das Ihr einziges Problem ist, dann ist die Lösung einfach. Erstellen Sie Ihre eigene bedingte Funktion:

const iff = (condition, then, otherwise) => condition ? then : otherwise; 

props => ({ 
    iconColor: props.isPriority ? 
    iff(props.isCompleted, variables.color.lightpurple, variables.color.purple) : 
    variables.color.gray3, 
    iconName: props.isPriority ? 'star-full' : 'star-empty', 
}) 

Jetzt sollte Ihr Linter nicht beschweren. Davon abgesehen, sollten Sie [no-nested-ternary] in Ihrem Linter deaktivieren. Es ist irgendwie dumm, dass dein Linter denkt, dass verschachtelte Bedingungen schlecht sind.

Answer 2

ich mit @JaromandaX vereinbaren, eine Funktion zu verwenden. Das hält Ihren JSX sauber und Ihre Logik ist wiederverwendbar.

aus, dass Apart, verschachtelten ternären Operator zu vermeiden, können Sie so etwas wie dies versuchen:

• Halten Sie ein Array/Karte aller möglicher Werte
• auf Fahnen Basierend, eine binäre Zeichenfolge erstellen und konvertieren in Zahl.
• den Wert am vorgesehenen Index zurück

function withTernary(a, b){ 
 
    return a ? (b ? 'test': 'foo') : 'bar'; 
 
} 
 

 
function withoutTernary(a, b){ 
 
    var result = ['bar', undefined, 'foo', 'test']; 
 
    // or may be a map 
 
    /* 
 
    * map = { 
 
    * '00': 'bar', 
 
    * '10': 'foo', 
 
    * '11': 'test' 
 
    * } 
 
    */ 
 
    var index = parseInt((+a) + '' + (+b), 2); 
 
    return result[index]; 
 
} 
 

 
var testCase = [[0,0], [1, 0], [1,1]]; 
 

 
testCase.forEach(x => { 
 
    console.log('With Ternary:', withTernary(...x)); 
 
    console.log('Without Ternary:', withoutTernary(...x)); 
 
})

Answer 3

Man könnte eine IIaFE (immeadiately aufgerufen Pfeil Funktionsausdruck) verwenden:

props => ({ 
     iconColor:(_=>{ 
      if(props.isPriority){ 
      if(props.isCompleted){ 
       return variables.color.lightpurple; 
      } 
      return variables.color.purple; 
      } 
      return variables.color.gray3; 
     })(), 
     iconName:(_=>{ 
      if(props.isPriority){ 
       return 'star-full'; 
      } 
      return 'star-empty'; 
     })() 
})) 

Answer 4

In diesem Fall könnten Sie in Betracht ziehen, die Bedingung zu invertieren, um die "unnatürliche" Verschachtelung von Ternärgruppen zu entfernen. Es wäre noch nisten, aber es kann flach geschrieben werden - ohne Klammern - was bedeutet, dass Sie es ordentlich über mehrere Zeilen legen kann:

props => ({ 
    iconColor: 
     !props.isPriority ? variables.color.gray3 
     : props.isCompleted ? variables.color.lightpurple 
     : variables.color.purple, 
    iconName: props.isPriority ? 'star-full' : 'star-empty', 
}) 

Die Kehrseite der Medaille ist die Verwendung einer negativen Bedingung, die ich in der Regel versuche es zu vermeiden, da sie etwas schwieriger zu folgen sind als positive Bedingungen.

Eine weitere Option ist es, die Bedingungen mit && abzuflachen:

props => ({ 
    iconColor: 
     props.isPriority && props.isCompleted ? variables.color.lightpurple 
     : props.isPriority ? variables.color.purple 
     : variables.color.gray3, 
    iconName: props.isPriority ? 'star-full' : 'star-empty', 
})