React中的条件渲染

• 基础的 React请求

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

function UserGreeting(props){
    return <h1>Welcome back!</h1>
}

function GustGreeting(props){
    return <h1>Plase sign up.</h1>
}

function Greeting(props){
    const isLoggedIn = props.isLoggedIn;
    if(isLoggedIn){
        return <UserGreeting/>;
    }
    return <GustGreeting/>;
}

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

ReactDOM.render(
    <Greeting isLoggedIn={true}></Greeting>,
    document.getElementById('root')
)

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

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

function LoginButton(props){

    return(
        <button onClick={props.onClick}>
            LoginButton
        </button>
    );

}

function LogoutButton(props){

    return(
        <button onClick={props.onClick}>
            LogoutButton
        </button>
    );

}

创建一个控制组件，实现对登录、登出连个组件的控制。在构造函数中除过必要的初始化，我们还需要对那些对一些时间进行绑定。里面设置了两个事件函数，分别用来改变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 = <LogoutButton onClick={this.handleLogoutClick}></LogoutButton>
        }else{
            button = <LoginButton onClick={this.handleLoginClick}></LoginButton>
        }

        return(
            <div>
                <Greeting isLoggedIn={isLoggedIn}/>
                {button}
            </div>
        );
    }
}

 代码分析：

• 条件渲染

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

function Mailbox(props){
    const unreadMessages = props.unreadMessages;
    
    return (
        <div>
            <h1>Hello!</h1>
            {unreadMessages.length> 0 &&
                <h2>
                    You have {unreadMessages.length} unread messages
                </h2>
            
            }
        </div>
    )
}

const messages = ['React','Re:React','Re:Re:React'];
// const messages = [];
ReactDOM.render(
    <Mailbox unreadMessages={messages}/>,
    document.getElementById('root')
)

• 阻止渲染

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

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

function WarningBanner(props){
    if(!props.warn){
        return null;
    }
    
    return (
        <div className='warning'>
            Warning!
        </div>
    )
}

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(
            <div>
                <WarningBanner warn={this.state.showWarning}></WarningBanner>
                <button onClick = {this.handleToggleClick}>
                    {this.state.showWarning?'Hide':'Show'}
                </button>
            </div>
        )
    }
}