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')
)