React.js中的条件渲染
使用条件语句，可以呈现和删除特定的组件。条件处理在JavaScript和React.js中的工作方式相似
示例
function DisplayUserMessage( props ){
const user = props.user.type;
if(type==’Player’){
return <h1>Player </player>;
}
If( type==’Admin’){
Return <h1>Admin </h1>;
}
}上面的示例中使用了if语句。用户类型决定要返回的消息。
组件的局部状态在决定条件渲染时非常有用，因为状态可以灵活地在组件内部进行更改。
与逻辑&&运算符内联
function MessageSizeChecker(props) {
const message = props.message;
return (
<div>
<h1>Hello!</h1>
{message.length > 100 &&
<h2>
Message size is greater than 100
</h2>
}
</div>
);
}如果&&运算符的第一个参数计算为true，那么第二个参数将显示在屏幕上。
如果不是三元运算符则内联-
它具有类似条件的语法吗？'第一秒';
function MessageSizeChecker(props) {
const message = props.message;
return (
<div>
<h1>Hello!</h1>
{message.length > 100 ? ‘Message size is greater than 100’: ‘Message size is ok’}
</div>
);
}该三元表达式可以在多个block语句上使用，但要理解它变得繁琐。因此，为使其简单起见，应在简单的条件下使用它。
我们可以决定要渲染的组件。
render() {
const isPlayer = this.state.user.isPlayer;
return (
<div>
{ isPlayer ? (
<Player >
) : (
<Admin />
)
}
</div>
);
}为了防止组件渲染，我们也可以返回null。但是仅从render方法返回null并不能阻止React进一步适用的生命周期