學習React(14) - 條件渲染 (conditional rendering)

當我們要建立react app的時候，你有可能需要展示或者隱藏某些HTML內容基於某些條件。很幸運的，條件渲染在React的做法跟javascript是一樣的。在React中，一共有四種方法。

1. if / else
2. Element variable
3. Ternary conditional operator
4. short circuit operator

小記：在VS Code，如果想使用class component, 那麼可以打rce，然後按Enter鍵，就出現了，代碼如下：

import React, { Component } from 'react'

export class Usergreeting extends Component {
    render() {
        return (
            <div>
                
            </div>
        )
    }
}

export default Usergreeting

但是，得把class前面的export去掉。就變成這樣：

import React, { Component } from 'react'

class Usergreeting extends Component {
    render() {
        return (
            <div>
                
            </div>
        )
    }
}

export default Usergreeting

但是，在class裏，得有構造函數吧，同樣也可以用快捷輸入，來快速有構造函數出來。在render() 的上面輸入rconst, 然後按enter鍵，就出現了。結果如下：

import React, { Component } from 'react'

class Usergreeting extends Component {

    // 輸入 “rconst”
    constructor(props) {
        super(props)
    
        this.state = {
             
        }
    }
    
    render() {
        return (
            <div>
                Welcoming
            </div>
        )
    }
}

export default Usergreeting

---

現在來說說，在React中，如何用if 語句。還是先得在src文件夾中創建一個文件，名叫做Usergreeting.js. 下面是代碼：

// Usergreeting.js 文件
import React, { Component } from 'react'

class Usergreeting extends Component {

    // 輸入 “rconst”
    constructor(props) {
        super(props)
    
        this.state = {
             isLoggedIn: false
        }
    }

    render() {
        if(this.state.isLoggedIn){
            return (
                <div>
                    Welcomg
                </div>
            )
        } else {
            return (
                <div>
                    Welcome Guest
                </div>
            )
        }
    }
}

export default Usergreeting

在App.js中，是這麼顯示：

// App.js 文件
import React from 'react';
import './App.css';
import Usergreeting from './Usergreeting'

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

export default App;

結果如下：

因爲，在Usergreeting.js 文件中已經聲明瞭false了，所以就輸出Welcome Guest了。

---

現在來講講使用Element variables在React中如何用。還是同一個JS文件。

// Usergreeting.js 文件
import React, { Component } from 'react'

class Usergreeting extends Component {

    // 輸入 “rconst”
    constructor(props) {
        super(props)
    
        this.state = {
             isLoggedIn: false
        }
    }

    render() {
        /*
        // If 語句
        if(this.state.isLoggedIn){
            return (
                <div>
                    Welcomg
                </div>
            )
        } else {
            return (
                <div>
                    Welcome Guest
                </div>
            )
        }
        */

		// Element Variables
        let message;
        if(this.state.isLoggedIn){
            message = <div>Welcome </div>
        } else {
            message = <div>Welcome Guest</div>
        }
        return <div>{message}</div>
        // return message; // 這種寫法，博主試了，是可以的
    }
}

export default Usergreeting

App.js 文件保持不變，結果跟上面顯示的一樣。

---

下面將顯示Ternary conditional operator做法：

// Usergreeting.js 文件
import React, { Component } from 'react'

class Usergreeting extends Component {

    // 輸入 “rconst”
    constructor(props) {
        super(props)
    
        this.state = {
             isLoggedIn: false
        }
    }

    render() {
        /*
        // If 語句
        if(this.state.isLoggedIn){
            return (
                <div>
                    Welcomg
                </div>
            )
        } else {
            return (
                <div>
                    Welcome Guest
                </div>
            )
        }
        */

        /*
        // Element Variables
        let message;
        if(this.state.isLoggedIn){
            message = <div>Welcome </div>
        } else {
            message = <div>Welcome Guest</div>
        }
        return <div>{message}</div>
        // return message;
        */

        // Ternary conditional operator
        return (
            this.state.isLoggedIn ?
            <div>Welcomg</div> :
            <div>Welcome Guest</div>
        )
    }
}

export default Usergreeting

App.js 文件還是跟上面一樣，結果也是一樣的。

---

還是在同一個文件：

// Usergreeting.js 文件
import React, { Component } from 'react'

class Usergreeting extends Component {

    // 輸入 “rconst”
    constructor(props) {
        super(props)
    
        this.state = {
             isLoggedIn: false
        }
    }

    render() {
        /*
        // If 語句
        if(this.state.isLoggedIn){
            return (
                <div>
                    Welcomg
                </div>
            )
        } else {
            return (
                <div>
                    Welcome Guest
                </div>
            )
        }
        */

        /*
        // Element Variables
        let message;
        if(this.state.isLoggedIn){
            message = <div>Welcome </div>
        } else {
            message = <div>Welcome Guest</div>
        }
        return <div>{message}</div>
        // return message;
        */

        /*
        // Ternary conditional operator
        return (
            this.state.isLoggedIn ?
            <div>Welcomg</div> :
            <div>Welcome Guest</div>
        )
        */

        // Short circuit operator
        return this.state.isLoggedIn && <div>Welcome</div>
    }
}

export default Usergreeting

因爲在文件中聲明瞭是false, 所以就什麼都沒顯示。
但是，如果改成true，就會顯示Welcome的字樣。

---

如果覺得總結挺好的，就用點贊來取代五星好評吧！