iT邦幫忙

0

React 官方文檔所教的條件 Render

挑戰 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
  1. 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;
  1. 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>
    }
  }
  1. Element 變數
render() {
    let message;
    if (this.state.isLogin) {
      message = <div>Welcome Tom!</div>
    } else {
      message = <div>Welcome Guest!</div>
    }
    return <div>{message}</div>
  }
  1. 三元運算符
render() {
    return (
      this.state.isLogin ?
      <div>Welcome Tom!</div> :
      <div>Welcome Guest!</div>
    )
  }
  1. Inline If 與 && 邏輯運算子

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

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

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

小結論

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


尚未有邦友留言

立即登入留言