我如何选择在 JSX 中包含一个元素？这是一个使用横幅的示例，如果它已传入，则该横幅应位于组件中。我想避免的是必须在 if 语句中复制 HTML 标记。
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>
);
}
只需将横幅保留为未定义，它就不会被包含在内。
那这个呢。让我们定义一个简单的帮助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 />，无论条件为真还是假，始终执行组件内的代码。因此，如果是（注意第二行的属性访问），以下示例将失败：bannernull
<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>
就个人而言，我真的认为（JSX In Depth）中显示的三元表达式是符合 ReactJs 标准的最自然的方式。
请参阅以下示例。乍一看有点乱，但效果很好。
<div id="page">
{this.state.banner ? (
<div id="banner">
<div class="another-div">
{this.state.banner}
</div>
</div>
) :
null}
<div id="other-content">
blah blah blah...
</div>
</div>
你也可以这样写
{ this.state.banner && <div>{...}</div> }
如果您state.banner是null或undefined，则跳过条件的右侧。
的If样式组件是危险的，因为该代码块总是执行不管条件的。例如，如果banner是，这将导致空异常null：
//dangerous
render: function () {
return (
<div id="page">
<If test={this.state.banner}>
<img src={this.state.banner.src} />
</If>
<div id="other-content">
blah blah blah...
</div>
</div>
);
}
另一种选择是使用内联函数（尤其适用于 else 语句）：
render: function () {
return (
<div id="page">
{function(){
if (this.state.banner) {
return <div id="banner">{this.state.banner}</div>
}
}.call(this)}
<div id="other-content">
blah blah blah...
</div>
</div>
);
}
react问题的另一个选择：
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>
);
}