React官网学习实践 - 条件渲染

Myth丶恋晨 2021-06-24 16:11 500阅读 0赞

在 React 中，你可以创建不同的组件来封装各种你需要的行为。然后还可以根据应用的状态变化只渲染其中的一部分。

React 中的条件渲染和 JavaScript 中的一致，使用 JavaScript 操作符 [`if`][if] 或[条件运算符][Link 1]来创建表示当前状态的元素，然后让 React 根据它们来更新 UI。

实例：  
首先创建三个组件：

定义一个变量，是否登录, isLoggedIn：

constructor(props) {
            super(props);
            this.state = {
                isLoggedIn: true
            };

再定义一个button，并设置一个事件函数，点击button修改登录状态：

handleClick() {
            this.setState(prevState => ({
                isLoggedIn: !prevState.isLoggedIn
            }));
        }
    
     render() {
        return (
            <div>
                <Greeting isLoggedIn={this.state.isLoggedIn} />
                <button onClick={this.handleClick}>
                    {this.state.isLoggedIn ? '登出' : '登录'}
                </button>
            </div>
        );
      }

显示：

![2789632-9847c61c1268de48.gif][]

Code：

import React, { Component } from 'react';
    import './App.css';
    
    function UserGreeting(props) {
        return <h1>Welcome back!</h1>;
    }
    
    function GuestGreeting(props) {
        return <h1>Please sign up.</h1>;
    }
    
    function Greeting(props) {
        const isLoggedIn = props.isLoggedIn;
        if (isLoggedIn) {
            return <UserGreeting />;
        }
        return <GuestGreeting />;
    }
    
    class App extends Component {
        constructor(props) {
            super(props);
            this.state = {
                isLoggedIn: true
            };
    
            this.handleClick = this.handleClick.bind(this);
        }
        componentWillMount () {
            console.log('this is in componentWillMount method.');
    
        }
        componentDidMount () {
            console.log('this is in componentDidMount method.');
        }
        componentWillReceiveProps (nextProps) {
            console.log('this is in componentWillReceiveProps method.');
        }
        // shouldComponentUpdate (nextProps,nextState) {
        //     console.log('this is in shouldComponentUpdate method.');
        // }
        componentWillUpdate (nextProps,nextState) {
            console.log('this is in componentWillUpdate method.');
        }
        componentDidUpdate (prevProps,prevState) {
            console.log('this is in componentDidUpdate method.');
        }
    
        handleClick() {
            this.setState(prevState => ({
                isLoggedIn: !prevState.isLoggedIn
            }));
        }
        render() {
        return (
            <div>
                <Greeting isLoggedIn={this.state.isLoggedIn} />
                <button onClick={this.handleClick}>
                    {this.state.isLoggedIn ? '登出' : '登录'}
                </button>
            </div>
        );
      }
        componentWillUnmount () {
            console.log('this is in componentWillUnmount method.');
        }
    }
    
    export default App;

[if]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/if...else
[Link 1]: https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/Conditional_Operator
[2789632-9847c61c1268de48.gif]: /images/20210615/59a11e215be74a5c8775266cf1efffaa.png