React从入门到精通系列之(7)根据条件选择性渲染元素

根据条件选择性渲染元素

在React中，您能够根据所需行为来建立并封装的不一样组件。 而后，您能够根据某些条件来仅仅渲染其中的某一些。固然，这具体取决于当前应用程序的状态。

React中的分条件渲染与JavaScript中的分条件工做方式相同。 使用JavaScript运算符（如if或条件运算符）来建立一个表示当前状态的元素，让React匹配它们而后更新UI。

考虑这两个组件：

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

function GuestGreeting(props) {
    return <h1>Please sign up!</h1>;
}

咱们将建立一个Greeting组件，根据用户是否登陆显示这些组件中的其中一个：

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

ReactDOM.render(
    // 能够尝试将isLoggedIn改成true
    <Greeting isLoggedIn={false} />,
    document.getElementById('root')
)

此示例根据isLoggedIn prop的值呈现不一样的问候语。

固然还有另一种状况，就是知足某个条件以后显示具体的内容，不然不显示，能够参考一下组件：

function DoSomething(props) {
    return <h1>hello everybody!</h1>;
}

function Amazing(props) {
    const isShow = props.isShow;
    if (isShow) {
        return <DoSomething />
    } else {
        // 返回null便可
        return null;
    }
}

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

元素变量

您可使用变量来存储React元素。 这能够帮助您有条件地渲染组件的一部分，其他输出也不会更改。

考虑这两个表明注销和登陆按钮的新组件：

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

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

在下面的示例中，咱们将建立一个名为LoginControl的有状态组件。
它将根据其当前state呈现<LoginButton />或<LogoutButton />。 它还将呈现来自前面示例的<Greeting />：

class LoginControl extends React.Component {
    constructor(props) {
        super(props);
        this.state = {isLogin: false};
        this.loginClick = this.loginClick.bind(this);
        this.logoutClick = this.logoutClick.bind(this);
    }
    
    loginClick() {
        this.setState({isLogin: true});
    }
    
    logoutClick() {
        this.setState({isLogin: false});
    }
    
    render() {
        const isLoggedIn = this.state.isLogin;
        let button = null;
        
        if (isLoggedIn) {
            button = <LogoutButton onClick={this.logoutClick} />;
        } else {
            button = <LoginButton onClick={this.loginClick} />;
        }
        
        return (
            <div>
                <Greeting isLoggedIn={isLoggedIn} />
                {button}
            </div>
        );
    }
}


ReactDOM.render(
    <LoginControl />,
    document.getElementById('root')
)

虽然声明变量并使用if语句是一个有条件地渲染组件的好方法，但有时您可能须要使用较短的语法。 有几种方法来内联JSX中的条件，以下所述。

经过逻辑运算符『 &&』内联if判断

您能够在JSX中嵌入任何表达式，将它们括在大括号中。 这包括JavaScript逻辑&&运算符。 它能够方便地有条件地包括一个元素：

import React from 'react';
import ReactDOM from 'react-dom';

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 =['zhangyatao', 'Re: zhangyatao', 'Re:Re: zhangyatao'];
ReactDOM.render(
    <Mailbox unreadMessages={messages} />,
    document.getElementById('root')
);

它的工做原理以下：
由于在JavaScript中，true && expression老是返回为expression，而false && expression老是返回为false。

所以，若是条件为true，紧接在&&以后的元素将出如今输出中。 若是它为false，React将忽略并跳过它。

内联if-else进行条件判断操做

根据条件进行内联元素判断的另外一种方法是使用JavaScript三元运算符判断 ? 真 : 假 。
在下面的例子中，咱们使用它来有条件地渲染一小块文本。

render() {
    const isLoggedIn = this.state.isLoggedIn;
    return (
        <div>
            The user is <b>{isLoggedIn ? '已登陆' : '未登陆'}</b>
        </div>
    );
}

它也能够用于较大的表达式，虽然不太明显发生了什么：

render() {
    const isLoggedIn = this.state.isLoggedIn;
    return (
        <div>
            {isLoggedIn ? (
                <LogoutButton onClick={this.logoutClick} />
            ) : (
                <LoginButton onClick={this.loginClick} />
            )}
        </div>
    );
}

就像在JavaScript中同样，它取决于你和你的团队考虑更多的可读性，选择一个适当的风格。 还要记住，当条件变得太复杂时，多是提取组件的好时机。

阻止组件渲染

在极少数状况下，您可能但愿由另外一个组件呈现的状况下该组件仍然隐藏自身。 这样的话，返回null便可。
在下面的示例中，<WarningBanner />根据称为warn的props的值来渲染。 若是prop的值为false，则组件不渲染到页面中：

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.toggleClick = this.toggleClick.bind(this);
    }
    
    toggleClick() {
        this.setState(prevState => ({
            showWarning: !prevState.showWarning
        }));
    }
    
    render() {
        return (
            <div>
                <WarningBanner warn={this.state.showWarning} />
                <button onClick={this.toggleClick}>
                   {this.state.showWarning ? 'Hide' : 'Show'}
                </button>
            </div>
        );
    }
}

ReactDOM.render(
    <Page />,
    document.getElementById('root')
)