我如何选择在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
其他回答
大多数例子都只有一行“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>
);
}
你可以像这样使用三元运算符有条件地包含元素:
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>中的代码只有在条件为真时才会执行。
&& +代码风格+小组件
对我来说，这种简单的测试语法+代码风格的约定+小型集中组件是最易读的选项。您只需要特别注意假值，如false、0或""。
render: function() {
var person= ...;
var counter= ...;
return (
<div className="component">
{person && (
<Person person={person}/>
)}
{(typeof counter !== 'undefined') && (
<Counter value={counter}/>
)}
</div>
);
}
做记号
ES7 stage-0 do符号语法也非常好，当我的IDE正确支持它时，我肯定会使用它:
const Users = ({users}) => (
<div>
{users.map(user =>
<User key={user.id} user={user}/>
)}
</div>
)
const UserList = ({users}) => do {
if (!users) <div>Loading</div>
else if (!users.length) <div>Empty</div>
else <Users users={users}/>
}
更多细节在这里:创建一个“If”组件…好主意?
只是留下旗帜为未定义，它不包括在内。
