0
点赞
收藏
分享

微信扫一扫

react18【系列实用教程】useEffect —— 副作用操作 (2024最新版)

J简文 2024-05-14 阅读 6

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>
  );
}
举报

相关推荐

0 条评论