Bedingtes Rendering in React (jsx)

Grundsätzlich muss die Bedingung wahr oder falsch ausgewertet werden. Dies unterscheidet sich von der Funktionsweise von Bedingungen in js. Folgendes meine ich:

data.length > 0 && <div />

data.length && <div />

Im ersten Fall, wenn die Größe des Arrays 0 ist, 0 > 0wird zu falseso false && [anything really]ausgewertet, wird zu false ausgewertet, sodass die Komponente nicht gerendert wird.

Im zweiten Fall jedoch, wenn die Größe 0 ist, wird 0 && <div />ausgewertet zu 0<div />. Mit anderen Worten, sowohl 0 als auch das Element werden gerendert. Von js ausgehend würde ich erwarten, dass der &&Operator 0 auf der linken Seite in einen booleschen Wert (false) umwandelt, aber das passiert nicht, also werden beide gerendert – so funktioniert jsx?

Sie würden erwarten, dass die Anweisung 0 && <div />zu ausgewertet wird false. Das wäre tatsächlich außerhalb von jsx der Fall.

const value = data.length ? 1 : 0;

Wie wäre es mit der folgenden Aussage, was denkst du, wäre das Ergebnis?

data.length ? <div />: <err />;

Es läuft also darauf hinaus, wie die Operatoren binary (&&)und ternary (? :)Bedingungen in jsx handhaben - einer erzwingt (ternär) und der andere nicht (binär).

Wie wäre es, wenn wir die Operanden des binären Operators vertauschen?

<div /> && data.length > 0

Ich kenne Leute, die sich aufgrund seiner nicht deterministischen Natur vom binären Operator in jsx fernhalten. Sie verwenden den Ternärwert und stellen ihn nullals Operanden bereit, wenn für eine bestimmte Auswertung nichts gerendert werden soll.

Ich habe auch festgestellt, dass die obigen Regeln für dynamische classNames gleich funktionieren .

Nehmen wir an, Sie haben eine Komponente, die den aktuellen Schritt in einem Prozess anzeigt, und Sie möchten diesem eine andere Farbe/ein anderes Verhalten geben, um die Stile für alle Schrittkomponenten zu erweitern.

<div className={`step ${current ? 'current' : ''}`} />

Wie wäre es mit dem nullOperanden für die falsche Auswertung?

<div className={`step ${current ? 'current' : null}`} />

Wie wäre es mit binär? Okay, lass uns nachsehen…

<div className={`step ${current && 'current'}`} />

Mein Favorit ist nach wie vor der leere String ''für die Fehlauswertung. Lassen Sie mich wissen, welche Technik Sie einsetzen .

Wenn Sie Ihre Komponente so entworfen haben, erben Sie keine Stile, wie ich es oben tue (wo alle aktuellen und nicht aktuellen Komponenten eine übergeordnete Klasse von haben step) – und sind wahrscheinlich bereit, einige der Regeln zu duplizieren ( was ist der Schaden) dann kann das Problem viel einfacher werden:

<div className={current ? 'current' : 'not-current'} />

Trotzdem ist mein Favorit die ''.