那这个呢。让我们定义一个简单的帮助If
组件。
var If = React.createClass({
render: function() {
if (this.props.test) {
return this.props.children;
}
else {
return false;
}
}
});
并以这种方式使用它:
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>
);
}
更新:随着我的答案越来越流行,我有义务警告您有关此解决方案的最大危险。正如另一个答案中指出的那样<If />
,无论条件是true还是false,始终都会执行组件内部的代码。因此,以下示例将在“ banner
是”的情况下失败null
(请注意第二行的属性访问):
<If test={this.state.banner}>
<div id="banner">{this.state.banner.url}</div>
</If>
使用时必须小心。我建议阅读其他答案,以寻求替代(更安全)的方法。
更新2:回望一下,这种方法不仅危险,而且非常麻烦。这是一个典型的例子,当开发人员(我)试图将他所知道的模式和方法从一个领域转移到另一个领域,但实际上并没有用(在这种情况下,是其他模板语言)。
如果您需要条件元素,请按照以下步骤操作:
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>
);
}
如果还需要else分支,则只需使用三元运算符:
{this.state.banner ?
<div id="banner">{this.state.banner}</div> :
<div>There is no banner!</div>
}
它更短,更优雅,更安全。我用它所有的时间。唯一的缺点是您无法else if
轻松地进行分支,但这通常并不常见。
无论如何,这要归功于JavaScript中逻辑运算符的工作方式。逻辑运算符甚至允许以下小技巧:
<h3>{this.state.banner.title || 'Default banner title'}</h3>
else
分支怎么办?我不熟悉jsx ...