学习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的字样。

---

如果觉得总结挺好的，就用点赞来取代五星好评吧！