Wie kann ich ein Element optional in JSX einbinden? Hier ist ein Beispiel mit einem Banner, das in der Komponente sein sollte, wenn es in übergeben wurde. Was ich vermeiden möchte, ist mit HTML-Tags in der if-Anweisung zu duplizieren.
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>
);
}
Lassen Sie das Banner einfach als undefiniert stehen, dann wird es nicht berücksichtigt.
Wie wäre es damit. Definieren wir eine einfache helfende "If"-Komponente.
var If = React.createClass({
render: function() {
if (this.props.test) {
return this.props.children;
}
else {
return false;
}
}
});
Und verwenden Sie sie so:
render: function () {
return (
<div id="page">
<If test={this.state.banner}>
<div id="banner">{this.state.banner}</div>
</If>
<div id="other-content">
blah blah blah...
</div>
</div>
);
}
UPDATE: Da meine Antwort immer beliebter wird, fühle ich mich verpflichtet, Sie vor der größten Gefahr zu warnen, die mit dieser Lösung verbunden ist. Wie bereits in einer anderen Antwort erwähnt, wird der Code innerhalb der Komponente <If />
immer ausgeführt, unabhängig davon, ob die Bedingung wahr oder falsch ist. Daher wird das folgende [Beispiel][1] fehlschlagen, wenn das Banner
null
ist (beachten Sie den Eigenschaftszugriff in der zweiten Zeile):
<If test={this.state.banner}>
<div id="banner">{this.state.banner.url}</div>
</If>
Sie müssen also 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 hoffnungslos umständlich. Es ist ein typisches Beispiel dafür, dass ein Entwickler (ich) versucht, Muster und Ansätze, die er aus einem Bereich kennt, auf einen anderen zu übertragen, was aber nicht wirklich funktioniert (in diesem Fall andere Template-Sprachen).
Wenn Sie ein bedingtes Element benötigen, machen Sie es so:
render: function () {
return (
<div id="page">
{this.state.banner &&
<div id="banner">{this.state.banner}</div>}
<div id="other-content">
blah blah blah...
</div>
</div>
);
}
Wenn Sie auch den else-Zweig benötigen, verwenden Sie einfach einen ternären Operator:
{this.state.banner ?
<div id="banner">{this.state.banner}</div> :
<div>There is no banner!</div>
}
Das ist viel kürzer, eleganter und sicherer. Ich verwende ihn ständig. Der einzige Nachteil ist, dass man nicht so einfach else if
Verzweigungen machen kann, aber das ist normalerweise nicht so üblich.
Jedenfalls ist dies dank der Funktionsweise der logischen Operatoren in JavaScript möglich. Die logischen Operatoren erlauben sogar kleine Tricks wie diesen:
<h3>{this.state.banner.title || 'Default banner title'}</h3>
Diese Komponente funktioniert, wenn Sie mehr als ein Element innerhalb der "if" Verzweigung haben:
var Display = React.createClass({
render: function() {
if (!this.props.when) {
return false;
}
return React.DOM.div(null, this.props.children);
}
});
Verwendung:
render: function() {
return (
<div>
<Display when={this.state.loading}>
Loading something...
<div>Elem1</div>
<div>Elem2</div>
</Display>
<Display when={!this.state.loading}>
Loaded
<div>Elem3</div>
<div>Elem4</div>
</Display>
</div>
);
},
P.s. Jemand denkt, dass diese Komponenten nicht gut für das Lesen von Code sind. Aber meiner Meinung nach ist html mit javascript schlechter