react中条件渲染三种方式:
if (isLoggedIn) {
return <UserGreeting />;
}
return <GuestGreeting />;
根据传入值渲染时:
const isLoggedIn = this.state.isLoggedIn;
let button;
if (isLoggedIn) {
button = <LogoutButton onClick={this.handleLogoutClick} />;
} else {
button = <LoginButton onClick={this.handleLoginClick} />;
}
-
可以在运算符中嵌入逻辑与(&&)运算符
因为在js中 true && expression 总是返回expression。而false && expression 总是返回false(react会忽略)。
⚠️:返回false的表达式会使&&后面的元素被跳过,但会返回false表达式。
// 当没有阅读的消息条数大于0时,渲染h2标签 {unreadMessages.length > 0 && <h2> You have {unreadMessages.length} unread messages. </h2> }
-
三目运算符
可以使用js中的三目运算符: condition ? true : false
return (
<div>
The user is <b>{isLoggedIn ? 'currently' : 'not'}</b> logged in.
</div>
);
阻止渲染:
在我们需要隐藏组件时,可以让render方法直接返回null,不进行任何渲染。