我如何选择在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
其他回答
还有一种技术使用渲染道具对组件进行条件渲染。它的好处是，在条件满足之前，渲染不会计算，因此不需要担心null和未定义的值。
const Conditional = ({ condition, render }) => {
if (condition) {
return render();
}
return null;
};
class App extends React.Component {
constructor() {
super();
this.state = { items: null }
}
componentWillMount() {
setTimeout(() => { this.setState({ items: [1,2] }) }, 2000);
}
render() {
return (
<Conditional
condition={!!this.state.items}
render={() => (
<div>
{this.state.items.map(value => <p>{value}</p>)}
</div>
)}
/>
)
}
}
我使用一个更显式的快捷方式:立即调用函数表达式(IIFE):
{(() => {
if (isEmpty(routine.queries)) {
return <Grid devices={devices} routine={routine} configure={() => this.setState({configured: true})}/>
} else if (this.state.configured) {
return <DeviceList devices={devices} routine={routine} configure={() => this.setState({configured: false})}/>
} else {
return <Grid devices={devices} routine={routine} configure={() => this.setState({configured: true})}/>
}
})()}
只是添加另一个选项-如果你喜欢/容忍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>
&& +代码风格+小组件
对我来说，这种简单的测试语法+代码风格的约定+小型集中组件是最易读的选项。您只需要特别注意假值，如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”组件…好主意?
你可以像这样使用三元运算符有条件地包含元素:
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>
}
