挑戰 React 第十八篇

新年快樂！！
這是今年的第一篇，之後大概是一週新增一篇文章的節奏。

目標

若 isLogin 狀態為登入，頁面顯示歡迎使用者 Tom;
若 isLogin 狀態為登出，頁面顯示歡迎使用者 Guest。

前置作業

1. 在 src 資料夾底下新增 UserGreeting.js 檔案

import React, { Component } from 'react'

class UserGreeting extends Component {
  constructor(props) {
    super(props)
    // 預設為非登入狀態
    this.state = {
       isLogin: false
    }
  }
  
  render() {
    return (
      <div>
        <div>
        Welcome Guest!  
        </div> 
        <div>
         Welcome Tom!  
        </div>
      </div>
    )
  }
}

export default UserGreeting

2. App.js 引入剛剛寫好的 UserGreeting

import React from 'react';
import './App.css';
import UserGreeting from './UserGreeting';

function App() {
  return (
    <div className="App">
      <UserGreeting />
    </div>
  );
}

export default App;

3. yarn start 成果

實作

以下會有四種寫法：

1. if - else

特別注意，有些人可能想在 return 裡面的訊息寫 if - else，但這麼做是不行的，因為 return 裡寫的是 jsx 。
jsx詳細內容參考官網

render() {
    if (this.state.isLogin) {
      return <div> Welcome Tom!</div>
    } else {  
      return <div> Welcome Guest!</div>
    }
  }

2. Element 變數

render() {
    let message;
    if (this.state.isLogin) {
      message = <div>Welcome Tom!</div>
    } else {
      message = <div>Welcome Guest!</div>
    }
    return <div>{message}</div>
  }

3. 三元運算符

render() {
    return (
      this.state.isLogin ?
      <div>Welcome Tom!</div> :
      <div>Welcome Guest!</div>
    )
  }

4. Inline If 與 && 邏輯運算子

若為登入的情況，則顯示 Welcome Tom，否則不會跳到右邊那一段。

render() {
    return (this.state.isLogin && <div>Welcome Tom!</div>)
  }

使用 Inline if 的例子沒有舉得很好，可以看以下官方網站範例。

小結論

自己比較常使用為第三種 - 三元運算符，更為簡潔易讀。