我如何选择在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>
);
}
当前回答
实验性的ES7 do语法使这很容易。如果你正在使用Babel，启用es7。doExpressions特性然后:
render() {
return (
<div id="banner">
{do {
if (this.state.banner) {
this.state.banner;
} else {
"Something else";
}
}}
</div>
);
}
见http://wiki.ecmascript.org/doku.php?id=strawman: do_expressions
其他回答
就我个人而言，我真的认为(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>
只是添加另一个选项-如果你喜欢/容忍coffee-script，你可以使用coffee-react来编写JSX，在这种情况下，if/else语句是可用的，因为它们是coffee-script中的表达式，而不是语句:
render: ->
<div className="container">
{
if something
<h2>Coffeescript is magic!</h2>
else
<h2>Coffeescript sucks!</h2>
}
</div>
我喜欢立即调用函数表达式(IIFE)和if-else的显式呈现回调和三元运算符。
render() {
return (
<div id="page">
{(() => (
const { banner } = this.state;
if (banner) {
return (
<div id="banner">{banner}</div>
);
}
// Default
return (
<div>???</div>
);
))()}
<div id="other-content">
blah blah blah...
</div>
</div>
);
}
你只需要熟悉IIFE语法，{expression}是常用的React语法，在它里面，你只需要考虑你正在编写一个调用自己的函数。
function() {
}()
需要用括号来包装
(function() {
}())
还有另一个解决方案，if组件的React:
var Node = require('react-if-comp');
...
render: function() {
return (
<div id="page">
<Node if={this.state.banner}
then={<div id="banner">{this.state.banner}</div>} />
<div id="other-content">
blah blah blah...
</div>
</div>
);
}
正如在回答中已经提到的，JSX为您提供了两个选项
三元运算符 {this.state.price ?< div > {this.state。价格}</div>: null} 逻辑连接 {this.state. price && <div>{this.state. price。价格}< / div >}
但是，对于price == 0，这些不适用。
JSX将在第一种情况下呈现假分支，而在逻辑连接的情况下，将不呈现任何内容。如果该属性可能为0，只需在JSX外部使用If语句即可。
