【Day08】条件渲染 Conditional Rendering

在 JSX 中，可以使用 JavaScript 中 if 陈述式
或条件运算子如 三元运算子(ternary operator)
来规范如何显示、更新 UI。

以下范例便根据 isLoggedIn prop 的值
来 render 不同问候语

function Greeting(props) {
  const isLoggedIn = props.isLoggedIn;
  if (isLoggedIn) {
    return <h1>Welcome back!</h1>;
  }
  return <h1>Please sign up.</h1>;
}

ReactDOM.render(
  // 试改为 isLoggedIn={true}:
  <Greeting isLoggedIn={false} />,
  document.getElementById('root')
);

以下列出两种 JSX 中常见的条件渲染

&& 逻辑运算子（If 条件）

在 JSX 中，可以透过大括号{} 嵌入表达式，其中也包含 && 运算子

<div>
  <h1>Hello!</h1>
  {unreadMessages.length > 0 &&
	<h2>
	  You have {unreadMessages.length} unread messages.
	</h2>
  }
</div>

回传 falsy expression 会导致 && 之後的 element 被忽略，但 falsy expression 本身依然会回传。在下面的范例中，render 将会回传 <div>0</div>

render() {
  const count = 0;
  return (
    <div>
      { count && <h1>Messages: {count}</h1>}
    </div>
  );
}

三元运算子（If-Else 条件）

也可以使用三元运算子

<div>
  The user is <b>{isLoggedIn ? 'currently' : 'not'}</b> logged in.
</div>

在 JavaScript 语法中依然可以穿插使用 JSX

render() {
  const isLoggedIn = this.state.isLoggedIn;
  return (
    <div>
      {isLoggedIn
        ? <LogoutButton onClick={this.handleLogoutClick} />
        : <LoginButton onClick={this.handleLoginClick} />
      }
    </div>
  );
}

防止 Component Render

如果某些条件下，
希望 Component 能够隐藏自己，
可以透过回传 null 来取代 render。

function WarningBanner(props) {
  if (!props.warn) {
    return null;
  }

  return (
    <div className="warning">
      Warning!
    </div>
  );
}