我如何选择在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样式组件是危险的，因为无论条件如何，代码块总是被执行。例如，如果banner为空，这将导致一个空异常:
//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>
);
}
其他回答
只是为了扩展@Jack Allan的回答，引用文档。
React基本(快速入门)文档建议在这种情况下为null。 然而，布尔值、Null和Undefined也会被忽略，详见高级指南。
就我个人而言，我真的认为(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>
你可以使用一个函数并返回组件，同时保持渲染函数的精简
class App extends React.Component {
constructor (props) {
super(props);
this._renderAppBar = this._renderAppBar.bind(this);
}
render () {
return <div>
{_renderAppBar()}
<div>Content</div>
</div>
}
_renderAppBar () {
if (this.state.renderAppBar) {
return <AppBar />
}
}
}
还有一个非常简洁的单行版本……{this.props.product.title || "No Title"}
Ie:
render: function() {
return (
<div className="title">
{ this.props.product.title || "No Title" }
</div>
);
}
很简单，创建一个函数。
renderBanner: function() {
if (!this.state.banner) return;
return (
<div id="banner">{this.state.banner}</div>
);
},
render: function () {
return (
<div id="page">
{this.renderBanner()}
<div id="other-content">
blah blah blah...
</div>
</div>
);
}
这是我个人一直遵循的模式。使代码非常干净，易于理解。更重要的是，如果Banner变得太大(或在其他地方重用)，它允许你将其重构到自己的组件中。
