网站首页优化手机网站开发团队

React 条件渲染: 与js中的写法一致

注意：在 JavaScript 中，true && expression 总是返回 expression，而 false && expression 总是返回 false。

因此，如果条件是 true，&& 右侧的元素就会被渲染，如果是 false，React 会忽略并跳过它。

1. if 或条件运算符来创建表示当前状态的元素
示例一：if (isLoggedIn) {button = <LogoutButton onClick={this.handleLogoutClick} />;} else {button = <LoginButton onClick={this.handleLoginClick} />;}
2. 在JSX中嵌入表达式使用花括号{}
示例一：
function Mailbox(props) {const unreadMessages = props.unreadMessages;return (<div><h1>Hello!</h1>{unreadMessages.length > 0 &&<h2>您有 {unreadMessages.length} 条未读信息。</h2>}</div>);
}
3.三目运算符 condition ? true : false。
4.阻止组件渲染  结合变量的boolean值和if进行判断
示例一：
function WarningBanner(props) {if (!props.warn) {//warn为存储在state中的可变变量return null;}return (<div className="warning">警告!</div>);
}