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