我如何选择在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>
);
}
当前回答
只是留下旗帜为未定义，它不包括在内。
其他回答
这是一篇关于React中所有条件渲染的不同选项的文章。
何时使用哪种条件渲染的关键要点:
* * if - else
最基本的是条件渲染吗 初学者友好 使用if可以通过返回null提早退出渲染方法
**三元运算符
在if-else语句外使用它 它比if-else更简洁
逻辑&&运算符
当三元操作的一侧返回null时使用它
**开关箱
详细的 只能内联自调用函数 避免使用枚举
** 枚举
完美地映射不同的州 完美地映射不止一个条件
**多级/嵌套条件渲染
为了可读性，避免使用它们 将组件拆分为具有自己的简单条件呈现的更轻量级的组件 使用的
** HOC
使用它们来屏蔽条件呈现 组件可以专注于它们的主要用途
**外部模板组件
避免使用它们，熟悉JSX和JavaScript
只是为了扩展@Jack Allan的回答，引用文档。
React基本(快速入门)文档建议在这种情况下为null。 然而，布尔值、Null和Undefined也会被忽略，详见高级指南。
大多数例子都只有一行“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>
);
}
当必须只渲染某些东西，如果传递的条件是完全满足的，你可以使用语法:
{ 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中进行条件渲染的方法!
只是添加另一个选项-如果你喜欢/容忍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>
