Wie füge ich optional ein Element in JSX ein? Hier ist ein Beispiel für die Verwendung eines Banners, das sich in der Komponente befinden sollte, wenn es übergeben wurde. Ich möchte vermeiden, dass HTML-Tags in der if-Anweisung dupliziert werden müssen.
render: function () {
var banner;
if (this.state.banner) {
banner = <div id="banner">{this.state.banner}</div>;
} else {
banner = ?????
}
return (
<div id="page">
{banner}
<div id="other-content">
blah blah blah...
</div>
</div>
);
}
javascript
reactjs
react-jsx
Jack Allan
quelle
quelle
else
Filiale haben ? Funktioniert das? Ich bin nicht vertraut mit jsx ...Antworten:
Lassen Sie das Banner einfach als undefiniert und es wird nicht aufgenommen.
quelle
null
genauso gut wieundefined
? Ist das auch ein Teil der Spezifikation, dass es so funktioniert und daher in Zukunft wahrscheinlich nicht kaputt geht?Was ist damit? Definieren wir eine einfache Hilfskomponente
If
.Und benutze es so:
UPDATE: Da meine Antwort immer beliebter wird, fühle ich mich verpflichtet, Sie vor der größten Gefahr im Zusammenhang mit dieser Lösung zu warnen. Wie in einer anderen Antwort ausgeführt, wird der Code in der
<If />
Komponente immer ausgeführt, unabhängig davon, ob die Bedingung wahr oder falsch ist. Daher schlägt das folgende Beispiel fehl, falls dies der Fallbanner
istnull
(beachten Sie den Eigenschaftszugriff in der zweiten Zeile):Sie müssen vorsichtig sein, wenn Sie es verwenden. Ich schlage vor, andere Antworten für alternative (sicherere) Ansätze zu lesen.
UPDATE 2: Rückblickend ist dieser Ansatz nicht nur gefährlich, sondern auch äußerst umständlich. Es ist ein typisches Beispiel dafür, wie ein Entwickler (ich) versucht, Muster und Ansätze, die er kennt, von einem Bereich in einen anderen zu übertragen, aber es funktioniert nicht wirklich (in diesem Fall in anderen Vorlagensprachen).
Wenn Sie ein bedingtes Element benötigen, gehen Sie folgendermaßen vor:
Wenn Sie auch den Zweig else benötigen, verwenden Sie einfach einen ternären Operator:
Es ist viel kürzer, eleganter und sicherer. Ich benutze es die ganze Zeit. Der einzige Nachteil ist, dass Sie nicht so einfach
else if
verzweigen können, aber das ist normalerweise nicht so häufig.Dies ist jedoch möglich, da logische Operatoren in JavaScript funktionieren. Die logischen Operatoren erlauben sogar kleine Tricks wie diesen:
quelle
ReactElement
<span>
oder<div>
.Persönlich denke ich wirklich, dass die in ( JSX In Depth ) gezeigten ternären Ausdrücke die natürlichste Art sind, die den ReactJs-Standards entspricht.
Siehe folgendes Beispiel. Es ist auf den ersten Blick etwas chaotisch, funktioniert aber recht gut.
quelle
Sie können es auch wie schreiben
Wenn Ihr
state.banner
istnull
oderundefined
, ist die rechte Seite der Bedingung übersprungenen.quelle
Die
If
Stilkomponente ist gefährlich, da der Codeblock unabhängig von der Bedingung immer ausgeführt wird. Zum Beispiel würde dies eine Null - Ausnahme verursachen , wennbanner
istnull
:Eine andere Option ist die Verwendung einer Inline-Funktion (besonders nützlich bei else-Anweisungen):
Eine weitere Option, um Probleme zu lösen :
quelle
&& + Code-Stil + kleine Komponenten
Diese einfache Testsyntax + Konvention im Codestil + kleine fokussierte Komponenten ist für mich die am besten lesbare Option da draußen. Sie brauchen nur spezielle Pflege von falsy Werte zu übernehmen möchten
false
,0
oder""
.Notation machen
Die Notationssyntax für ES7 Stage-0 ist ebenfalls sehr gut und ich werde sie definitiv verwenden, wenn meine IDE sie korrekt unterstützt:
Weitere Details hier: ReactJs - Erstellen einer "Wenn" -Komponente ... eine gute Idee?
quelle
short-circuit syntax
Einfach, erstellen Sie eine Funktion.
Diesem Muster folge ich persönlich die ganze Zeit. Macht Code wirklich sauber und leicht verständlich. Darüber hinaus können Sie
Banner
die eigene Komponente umgestalten, wenn sie zu groß wird (oder an anderen Stellen wiederverwendet wird).quelle
Die experimentelle ES7-
do
Syntax macht dies einfach. Wenn Sie Babel verwenden, aktivieren Sie diees7.doExpressions
Funktion wie folgt:Siehe http://wiki.ecmascript.org/doku.php?id=strawman:do_expressions
quelle
Wie bereits in den Antworten erwähnt, bietet Ihnen JSX zwei Optionen
Ternärer Operator
{ this.state.price ? <div>{this.state.price}</div> : null }
Logische Verbindung
{ this.state.price && <div>{this.state.price}</div> }
Diese funktionieren jedoch nicht
price == 0
.JSX rendert im ersten Fall den falschen Zweig und im Falle einer logischen Verbindung wird nichts gerendert. Wenn die Eigenschaft 0 sein kann, verwenden Sie einfach if-Anweisungen außerhalb Ihrer JSX.
quelle
typeof(this.state.price) === "number"
als Bedingung (in beiden Varianten).Diese Komponente funktioniert, wenn sich mehr als ein Element im Zweig "if" befindet:
Verwendung:
Ps jemand denkt, dass diese Komponenten nicht gut zum Lesen von Code sind. Aber in meinen Augen ist HTML mit Javascript schlimmer
quelle
Die meisten Beispiele sind mit einer Zeile "HTML", die bedingt gerendert wird. Dies scheint für mich lesbar zu sein, wenn ich mehrere Zeilen habe, die bedingt gerendert werden müssen.
Erstes Beispiel ist gut, weil statt
null
wir einige andere Inhalte wie bedingt rendern können{this.props.showContent ? content : otherContent}
Wenn Sie jedoch nur Inhalte ein- / ausblenden müssen, ist dies sogar noch besser, da Boolesche Werte, Null und Undefiniert ignoriert werden
quelle
Es gibt eine andere Lösung, wenn Komponente für React :
quelle
Ich verwende eine explizitere Verknüpfung: Ein sofort aufgerufener Funktionsausdruck (IIFE):
quelle
Ich habe https://www.npmjs.com/package/jsx-control-statements erstellt , um es ein bisschen einfacher zu machen. Im Grunde können Sie
<If>
Bedingungen als Tags definieren und sie dann in ternäre ifs kompilieren, damit der Code in den<If>
nur erhalten wird ausgeführt, wenn die Bedingung erfüllt ist.quelle
Es gibt auch eine wirklich saubere einzeilige Version ... {this.props.product.title || "Kein Titel" }
Dh:
quelle
Ich habe kürzlich https://github.com/ajwhite/render-if erstellt , um Elemente nur dann sicher zu rendern, wenn das Prädikat erfolgreich ist .
oder
quelle
Sie können Elemente mit dem ternären Operator wie folgt bedingt einschließen:
quelle
Sie können eine Funktion verwenden und die Komponente zurückgeben und die Renderfunktion dünn halten
quelle
Hier ist mein Ansatz mit ES6.
Demo: http://jsfiddle.net/kb3gN/16688/
Ich verwende Code wie:
Das wird
SomeElement
nur gerendert , wennopened
es wahr ist. Es funktioniert aufgrund der Art und Weise, wie JavaScript logische Bedingungen auflöst:Wie
React
ich ignorieren werdefalse
, finde ich es sehr gut, einige Elemente bedingt zu rendern.quelle
Vielleicht hilft es jemandem, der auf die Frage stößt: Alle bedingten Renderings reagieren Es ist ein Artikel über die verschiedenen Optionen für das bedingte Rendern in React.
Wichtige Erkenntnisse darüber, wann welches bedingte Rendering verwendet werden soll:
** ansonsten
** ternärer Operator
** logischer && Operator
** Schaltergehäuse
** Aufzählungen
** mehrstufige / verschachtelte bedingte Renderings
** HOCs
** externe Vorlagenkomponenten
quelle
Mit ES6 können Sie dies mit einem einfachen Einzeiler tun
"show" ist ein Boolescher Wert und Sie verwenden diese Klasse von
quelle
Ich glaube nicht, dass dies erwähnt wurde. Dies ist wie Ihre eigene Antwort, aber ich denke, es ist noch einfacher. Sie können jederzeit Zeichenfolgen aus den Ausdrücken zurückgeben und jsx in Ausdrücken verschachteln, sodass ein einfach zu lesender Inline-Ausdruck möglich ist.
quelle
Ich mag die explizite Aussage von sofort aufgerufenen Funktionsausdrücken (
IIFE
) undif-else
überrender callbacks
undternary operators
.Sie müssen sich nur mit der
IIFE
Syntax vertraut machen ,{expression}
ist die übliche React-Syntax. Denken Sie nur daran, dass Sie eine Funktion schreiben, die sich selbst aufruft.das muss in parens eingewickelt werden
quelle
Es gibt auch eine Technik, bei der Render-Requisiten verwendet werden , um eine Komponente bedingt zu rendern. Der Vorteil ist, dass das Rendern erst ausgewertet wird, wenn die Bedingung erfüllt ist, sodass keine Sorgen um null und undefinierte Werte entstehen.
quelle
Wenn Sie nur etwas rendern müssen, wenn die übergebene Bedingung erfüllt ist, können Sie die folgende Syntax verwenden:
Der Code auf diese Weise würde folgendermaßen aussehen:
Es gibt natürlich auch andere gültige Möglichkeiten, dies zu tun. Es hängt alles von den Vorlieben und dem Anlass ab. Weitere Informationen zum bedingten Rendern in React finden Sie in diesem Artikel, wenn Sie interessiert sind.
quelle
Nur um eine weitere Option hinzuzufügen: Wenn Sie ein Kaffeeskript mögen / tolerieren, können Sie mit Coffee-React Ihre JSX schreiben. In diesem Fall können if / else-Anweisungen verwendet werden, da sie Ausdrücke im Kaffeeskript und keine Anweisungen sind:
quelle
Nur um die Antwort von @Jack Allan mit Verweisen auf Dokumente zu erweitern.
Reagieren Sie
null
in diesem Fall auf die grundlegende (Schnellstart-) Dokumentation . Allerdings Boolesche Werte, Null, und nicht definiert sind Ignoriert auch erwähnt in Advanced Guide.quelle