React官方文档--Conditional Rendering

Conditional Rendering

在React中，你可以创建不同的组件，并且渲染其中的一部分，这取决于你应用的状态。
状态渲染和JavaScript中的分支运算符有一样的效果，使用JavaScript中的类似if运算符来创建元素来代表当前状态，然后让React更新UI去匹配。
我们创建了一个Greeting组件去显示，显示的结果取决于用户是否登录。

//two components
function UserGreeting(props) {
    return <h1>Welcome back!</h1>
}
function GuestGreeting(props) {
    return <h1>Please sign up.</h1>
}

//根据状态随时切换运算符
function Greeting(props) {
    const isLoggedIn = props.isLoggedIn;
    if (isLoggedIn) {
        return <UserGreeting />;
    } else {
        return <GuestGreeting />;
    }
}

元素变量

可以使用变量来存储元素，可以帮助你在保证其他部分的输出不变的情况下，选择性的渲染一部分组件。考虑到这两个新的组件代表了登入登出按钮。

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

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

//create a stateful component
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 = null;
        //通过if条件语句来进行渲染
        if (isLoggedIn) {
            button = <LogoutButton onClick={this.handleLogoutClick} />
        } else {
            button = <LoginButton onClick={this.handleLoginClick} />
        }

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

使用&&运算符实现行内逻辑

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

还可以如上面所示，将JSX包裹在花括号里面，来处理条件表达式，根据JavaScript的语法：true && expression的值永远都是expression，而false && expression的值一直都是false。所以，如果条件表达式的结果为true，那么就会直接返回后面的值，如果结果为false则React会忽略并且跳过后面的表达式。

行内if-else条件运算符

另外一种实现行内渲染元素中的JavaScript条件表达式的是三目运算符condition ? true : false，下面的代码中使用了三目运算符。

render() {
    const isLoggedIn = this.state.isLoggedIn;
    return (
        <div>
            The user is <b> {isLoggedIn ? 'currently' : 'not'}</b> logged in.
        </div>
    );
}

就像JavaScript中一样，如何使用行内表达式来进行条件跳转取决于你的团队觉得哪种代码方式更加可读。

阻止组件渲染

在小部分情况下，你可能需要让一个元素隐藏。可以让render返回null而不是一个组件。
在下面的例子中:

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

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