react 条件渲染

朴灿烈づ我的快乐病毒、 2022-12-27 01:42 182阅读 0赞

在 `React` 中，你可以创建不同的组件来封装各种你需要的行为。然后还可以根据应用的状态变化只渲染其中的一部分。

`React` 中的条件渲染和 `JavaScript` 中的一致，使用 `JavaScript` 操作符 `if` 或条件运算符来创建表示当前状态的元素，然后让 `React` 根据它们来更新 UI。

## （1）元素变量 ##

你可以使用变量来储存元素。它可以帮助你有条件的渲染组件的一部分，而输出的其他部分不会更改。

if (isLoggedIn) { 
          button = <LogoutButton onClick={ this.handleLogoutClick} />;
        } else { 
          button = <LoginButton onClick={ this.handleLoginClick} />;
        }

## （2）与运算符 && ##

你可以通过用花括号包裹代码在 JSX 中嵌入任何表达式 ，也包括 JavaScript 的逻辑与 &&，它可以方便地条件渲染一个元素。

<div>
     <h1>Hello!</h1>
     { unreadMessages.length > 0 &&
       <h2>
         您有 { unreadMessages.length} 条未读信息。
       </h2>
     }
    </div>

## （3）三目运算符 ##

条件渲染的另一种方法是使用 JavaScript 的条件运算符:

<div>
          { isLoggedIn ? (
            <LogoutButton onClick={ this.handleLogoutClick} />
          ) : (
            <LoginButton onClick={ this.handleLoginClick} />
          )}
    </div>

## （4）阻止组件渲染 ##

在极少数情况下，你可能希望隐藏组件，即使它被其他组件渲染。让 render 方法返回 null 而不是它的渲染结果即可实现。

在上面的例子中， 根据属性 warn 的值条件渲染。如果 warn 的值是 false，则组件不会渲染：