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

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

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

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

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 />;
}

定义一个变量，是否登录, 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>
    );
  }

显示：

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;