Et ça. Définissons un If
composant d' aide simple .
var If = React.createClass({
render: function() {
if (this.props.test) {
return this.props.children;
}
else {
return false;
}
}
});
Et utilisez-le de cette façon:
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>
);
}
MISE À JOUR: Comme ma réponse devient populaire, je me sens obligé de vous avertir du plus grand danger lié à cette solution. Comme indiqué dans une autre réponse, le code à l'intérieur du <If />
composant est toujours exécuté, que la condition soit vraie ou fausse. Par conséquent, l' exemple suivant échouera dans le cas où banner
est null
(notez l'accès à la propriété sur la deuxième ligne):
<If test={this.state.banner}>
<div id="banner">{this.state.banner.url}</div>
</If>
Vous devez être prudent lorsque vous l'utilisez. Je suggère de lire d'autres réponses pour des approches alternatives (plus sûres).
MISE À JOUR 2: Avec le recul, cette approche est non seulement dangereuse mais aussi désespérément lourde. C'est un exemple typique d'un développeur (moi) qui essaie de transférer des modèles et des approches qu'il connaît d'un domaine à un autre, mais cela ne fonctionne pas vraiment (dans ce cas, d'autres langages de modèles).
Si vous avez besoin d'un élément conditionnel, faites-le comme ceci:
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>
);
}
Si vous avez également besoin de la branche else, utilisez simplement un opérateur ternaire:
{this.state.banner ?
<div id="banner">{this.state.banner}</div> :
<div>There is no banner!</div>
}
C'est beaucoup plus court, plus élégant et sûr. Je l'utilise tout le temps. Le seul inconvénient est que vous ne pouvez pas effectuer de else if
branchement aussi facilement, mais ce n'est généralement pas si courant.
Quoi qu'il en soit, cela est possible grâce au fonctionnement des opérateurs logiques en JavaScript. Les opérateurs logiques permettent même de petites astuces comme celle-ci:
<h3>{this.state.banner.title || 'Default banner title'}</h3>
else
succursale, ça marche? Je ne connais pas jsx ...