我如何选择在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>
);
}
当前回答
只是为了扩展@Jack Allan的回答，引用文档。
React基本(快速入门)文档建议在这种情况下为null。 然而，布尔值、Null和Undefined也会被忽略，详见高级指南。
其他回答
当必须只渲染某些东西，如果传递的条件是完全满足的，你可以使用语法:
{ condition && what_to_render }
这种方式的代码看起来像这样:
render() {
const { banner } = this.state;
return (
<div id="page">
{ banner && <div id="banner">{banner}</div> }
<div id="other-content">
blah blah blah...
</div>
</div>
);
}
当然，还有其他有效的方法来做到这一点，这完全取决于偏好和场合。如果你感兴趣，你可以在本文中学习更多如何在React中进行条件渲染的方法!
你可以像这样使用三元运算符有条件地包含元素:
render: function(){
return <div id="page">
//conditional statement
{this.state.banner ? <div id="banner">{this.state.banner}</div> : null}
<div id="other-content">
blah blah blah...
</div>
</div>
}
只是留下旗帜为未定义，它不包括在内。
我做了https://www.npmjs.com/package/jsx-control-statements，让它更简单一点，基本上它允许你定义<If>条件作为标签，然后将它们编译成三元If，这样<If>中的代码只有在条件为真时才会执行。
实验性的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
