Che dire di questo. Definiamo un semplice If
componente d' aiuto .
var If = React.createClass({
render: function() {
if (this.props.test) {
return this.props.children;
}
else {
return false;
}
}
});
E usalo in questo modo:
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>
);
}
AGGIORNAMENTO: Man mano che la mia risposta sta diventando popolare, mi sento in dovere di avvertirti del più grande pericolo legato a questa soluzione. Come sottolineato in un'altra risposta, il codice all'interno del <If />
componente viene eseguito sempre indipendentemente dal fatto che la condizione sia vera o falsa. Pertanto il seguente esempio fallirà nel caso in cui banner
sia null
(notare l'accesso alla proprietà sulla seconda riga):
<If test={this.state.banner}>
<div id="banner">{this.state.banner.url}</div>
</If>
Devi stare attento quando lo usi. Suggerisco di leggere altre risposte per approcci alternativi (più sicuri).
AGGIORNAMENTO 2: Guardando indietro, questo approccio non è solo pericoloso ma anche disperatamente ingombrante. È un tipico esempio di quando uno sviluppatore (me) tenta di trasferire schemi e approcci che conosce da un'area all'altra ma in realtà non funziona (in questo caso altri linguaggi modello).
Se hai bisogno di un elemento condizionale, fallo in questo modo:
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>
);
}
Se hai bisogno anche del ramo else, basta usare un operatore ternario:
{this.state.banner ?
<div id="banner">{this.state.banner}</div> :
<div>There is no banner!</div>
}
È molto più corto, più elegante e sicuro. Io lo uso per tutto il tempo. L'unico svantaggio è che non puoi fare else if
ramificazioni così facilmente, ma di solito non è così comune.
Comunque, questo è possibile grazie al modo in cui funzionano gli operatori logici in JavaScript. Gli operatori logici consentono anche piccoli trucchi come questo:
<h3>{this.state.banner.title || 'Default banner title'}</h3>
else
ramo, funziona? Non ho familiarità con jsx ...