我如何选择在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>
);
}
当前回答
还有一个非常简洁的单行版本……{this.props.product.title || "No Title"}
Ie:
render: function() {
return (
<div className="title">
{ this.props.product.title || "No Title" }
</div>
);
}
其他回答
当你在"if"分支中有多个元素时，这个组件可以工作:
var Display = React.createClass({
render: function () {
if (!this.props.when) {
return false;
}
return React.DOM.div(null, this.props.children);
},
});
用法:
render: function() {
return (
<div>
<Display when={this.state.loading}>
Loading something...
<div>Elem1</div>
<div>Elem2</div>
</Display>
<Display when={!this.state.loading}>
Loaded
<div>Elem3</div>
<div>Elem4</div>
</Display>
</div>
);
}
附注:有些人认为这些组件不适合代码阅读。但在我看来，Html和javascript更糟糕
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>
);
}
我最近创建了https://github.com/ajwhite/render-if，以便仅在谓词通过时安全地呈现元素。
{renderIf(1 + 1 === 2)(
<span>Hello!</span>
)}
or
const ifUniverseIsWorking = renderIf(1 + 1 === 2);
//...
{ifUniverseIsWorking(
<span>Hello!</span>
)}
大多数例子都只有一行“html”，是有条件呈现的。当我有多行需要有条件地呈现时，这对我来说似乎是可读的。
render: function() {
// This will be renered only if showContent prop is true
var content =
<div>
<p>something here</p>
<p>more here</p>
<p>and more here</p>
</div>;
return (
<div>
<h1>Some title</h1>
{this.props.showContent ? content : null}
</div>
);
}
第一个例子很好，因为我们可以有条件地呈现一些其他内容，如{this.props。showContent吗?内容:otherContent}
但如果你只是需要显示/隐藏内容，这是更好的，因为布尔值，Null和Undefined被忽略
render: function() {
return (
<div>
<h1>Some title</h1>
// This will be renered only if showContent prop is true
{this.props.showContent &&
<div>
<p>something here</p>
<p>more here</p>
<p>and more here</p>
</div>
}
</div>
);
}
只是留下旗帜为未定义，它不包括在内。
