React中的条件渲染

• 基础的 React请求

import React from 'react';
import ReactDOM from 'react-dom';
import './testStyle.css';

function UserGreeting(props){
    return 
Welcome back!
}

function GustGreeting(props){
    return 
Plase sign up.
}

function Greeting(props){
    const isLoggedIn = props.isLoggedIn;
    if(isLoggedIn){
        return ;
    }
    return ;
}

在渲染的时候通过传入一个isLoggedIn的值，然Greeting 函数组件来根据这个传递进来的值进行一个条件渲染：

ReactDOM.render(
    ,
    document.getElementById('root')
)

• 通过传递函数来实现的条件渲染

创建两个代表登录和登出的按钮：

function LoginButton(props){

    return(
        
            LoginButton
        
    );

}

function LogoutButton(props){

    return(
        
            LogoutButton
        
    );

}

创建一个控制组件，实现对登录、登出连个组件的控制。在构造函数中除过必要的初始化，我们还需要对那些对一些时间进行绑定。里面设置了两个事件函数，分别用来改变isLoggedIn的值，从而达到条件渲染的目的：

class LoginControl extends React.Component{

    constructor(props){
        super(props);
        this.handleLoginClick = this.handleLoginClick.bind(this);
        this.handleLogoutClick = this.handleLogoutClick.bind(this);
        this.state = {isLoggedIn:false};
    }

    handleLoginClick(){
        this.setState({
            isLoggedIn:true
        });
    }

    handleLogoutClick() {
        this.setState({
            isLoggedIn:false
        });
    }

    render(){
        const isLoggedIn = this.state.isLoggedIn;
        let button;

        if(isLoggedIn){
            button = 
        }else{
            button = 
        }

        return(
            

                
                {button}
            
        );
    }
}

 代码分析：

• 条件渲染

React的表达式中可以在JSX中嵌入任何类型的表达式，在下例中，如果条件是 true，&& 右侧的元素就会被渲染，如果是 false，React 会忽略并跳过它。对于更复杂的请求我们可以也可以采用三目表达式的方式。

function Mailbox(props){
    const unreadMessages = props.unreadMessages;
    
    return (
        

            
Hello!
            {unreadMessages.length> 0 &&
                

                    You have {unreadMessages.length} unread messages
                
            
            }
        
    )
}

const messages = ['React','Re:React','Re:Re:React'];
// const messages = [];
ReactDOM.render(
    ,
    document.getElementById('root')
)

• 阻止渲染

在原生的js中如果我们想要隐藏一个元素我们可以通过改变元素的属性：

 在我们React的组件渲染的理念中，我们可以即通过函数组件返回null或是class组件的render（）方法返回控制来实现，即在渲染的时候不再渲染。

function WarningBanner(props){
    if(!props.warn){
        return null;
    }
    
    return (
        

            Warning!
        
    )
}

class Page extends React.Component{
    constructor(props){
        super(props);
        this.state = {showWarning:true};
        this.handleToggleClick = this.handleToggleClick.bind(this);
    }

    handleToggleClick(){
        this.setState(state=>({
            showWarning:!state.showWarning
        }));
    }

    render(){
        return(
            

                
                
                    {this.state.showWarning?'Hide':'Show'}
                
            
        )
    }
}