09-12-2021

前言：
我們時常會在同一個頁面中需要顯示不同的畫面，可能是因為登入時的登入畫面或是按鈕的toggle情境，各式各樣的畫面顯示，使用條件render就可以讓畫面更簡潔。

本章內容

• 如何顯示不同的畫面
• Element 變數 顯示不同的畫面
• JSX 顯示不同的畫面
  • Inline If 與 && 邏輯運算子
  • Inline If-Else 與三元運算子
  • 使用null 阻止 Component Render

如何顯示不同的畫面

React 中的 render中的畫面與JavaScript 中一致，所以我們可以在裡面寫上if、三元運算子，來建立目前的狀態與元件，讓React根據它們更新UI。

1. 首先，需要建立切換的兩個不同的function compoenent

function UserHome(props) {
  return <h1>歡迎回來!</h1>;
}

function GuestHome(props) {
  return <h1>不好意思，請先登入！</h1>;
}

1. 根據isLoggedIn={true}:判斷有登入，顯示不同的畫面。
2. 定義Login狀態，const [isLogin, setisLogin] = useState(false);
3. 通常會在此頁上判斷LoginPOSTAPI後的結果，把結果用setisLogin存取起來，判斷是否為true
4. 顯示不同頁面<GuestHome />

const [isLogin, setisLogin] = useState(false);// 用來存取login狀態
//預設false

// POST API IS HERE !ß

function Home(props) {
  const isLoggedIn = props.isLoggedIn;
  if (isLoggedIn) {
    return <UserHome />;
  }
  return <GuestHome />;
}

ReactDOM.render(
  <Home isLoggedIn={false} />,
  document.getElementById('root')
);

Element 變數 顯示不同的畫面

使用變數儲存element，可以有條件的render一部分的component
將button定義顯示的<button/>內容

...定義控制狀態

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

    return(
        ....顯示button
    )

JSX 顯示不同的畫面

Inline If 與 && 邏輯運算子

可以使用大花括號在JSX嵌入表達式。

1. true && 表達式，回傳表達式
2. false && 表達式，會回傳false
3. 當條件為true時，&&右側的element即會回傳false
4. 回傳falsy表達式仍會導致 && 之後的element被忽略，但依舊回傳預設值。

function Message(props) {
  const unreadMessages = props.unreadMessages;
  return (
    <div>
      <h1>Hello!</h1>
      {unreadMessages.length > 0 &&
        <h2>
          You have {unreadMessages.length} unread messages.
        </h2>
      }
    </div>
  );
}

const messages = ['Message', 'Re: Message', 'Re:Re: Message'];
ReactDOM.render(
  <Mailbox unreadMessages={messages} />,
  document.getElementById('root')
);

Inline If-Else 與三元運算子

透過JavaScript的三元運算子來顯示不同的畫面，如果條件太複雜，不如就把component分解吧！

條件 (三元) 運算子
條件 ? true : false

render() {
  const isLoggedIn = this.state.isLoggedIn;
  return (
    <div>
      The user is <b>{isLoggedIn ? 'currently' : 'not'}</b> logged in.
    </div>
  );
}

使用null 阻止 Component Render

有些情況下，我們會需要隱藏component本人，在 component 中回傳 null 並不會影響 component 的生命週期方法。

1. 在條件式中判斷如果不顯示時，則回傳null

//範例
{Firstdata ? (
        <CustomModal
            isOpen={isOpen}
            onClose={onClose}
            Firstdata={Firstdata}
        />
    ) : null}

參考：
條件render