React 条件渲染

在 React 中，你可以创建不同的组件来封装各种你需要的行为。然后还可以根据应用的状态变化只渲染其中的一部分。

React 中的条件渲染和 JavaScript 中的一致，使用 JavaScript 操作符 if 或条件运算符来创建表示当前状态的元素，然后让 React 根据它们来更新 UI。

举一个简单的例子：

function UserGreeting(props) {
    return <h1>欢迎回来!</h1>;
}

function GuestGreeting(props) {
    return <h1>请先注册。</h1>;
}

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

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

---

元素变量

你可以使用变量来储存元素。 它可以帮助你有条件地渲染组件的一部分，而其他的渲染部分并不会因此而改变。

这两个组件分别代表了注销和登录按钮：

function LoginButton(props) {
    console.log(props.message);
    return (
        <button onClick={props.onClick}>
            登陆
        </button>
    );
}

function LogoutButton(props) {
    console.log(props.message);
    return (
        <button onClick={props.onClick}>
            退出
        </button>
    );
}

创建一个名叫 LoginControl 的有状态的组件

import React from 'react';

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 (isLoggedIn) {
            button = <LogoutButton message="欢迎回来" onClick={this.handleLogoutClick} />
        } else {
            button = <LoginButton message="请先注册" onClick={this.handleLoginClick} />
        }
        return (
            <div>
                {button}
            </div>
        );
    }
}
export default LoginControl;

点击登录按钮，控制台输出欢迎回来并且按钮文字变为退出。
点击退出按钮，控制台输出请先注册并且按钮文字变为登录。

---

与运算符 &&

通过花括号包裹代码，你可以在 JSX 中嵌入任何表达式。这也包括 JavaScript 中的逻辑与 (&&) 运算符。它可以很方便地进行元素的条件渲染。

import React from 'react';
/**
 * MailBox.jsx
 */
// 创建组件 MailBox
class MailBox extends React.Component {

    constructor(props) {
        super(props);
    }

    render() {
        return (
            this.props.unreadMessage.length && 
            <h2>
                您有{this.props.unreadMessage.length}条消息未读                            
            </h2>
        );
    }
}

export default MailBox;

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import MailBox from './learn/MailBox';
/**
 * index.js
 */
const message = ['message1', 'message2', 'message3'];

// 将 MailBox 挂在到root节点上
ReactDOM.render(
  <MailBox unreadMessage={message} />,
  document.getElementById('root')
);

如果条件是 true，&& 右侧的元素就会被渲染，如果是 false，React 会忽略并跳过它。

---

阻止组件渲染

在极少数情况下，你可能希望能隐藏组件，即使它已经被其他组件渲染。若要完成此操作，你可以让 render 方法直接返回 null，而不进行任何渲染。

下面的示例中，<WarningBanner /> 会根据 prop 中 warn 的值来进行条件渲染。如果 warn 的值是 false，那么组件则不会渲染:

import React from 'react';
/** 
 * Page.jsx
 */
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} />
                <button onClick={this.handleToggleClick}>
                    {this.state.showWarning ? 'Hide' : 'Show'}
                </button>
            </div>
        );
    }
}
export default Page;
function WarningBanner(props) {
    if (!props.warn) {
        return null;
    }

    return (
        <div className="warning">
            Warning!
        </div>
    );
}

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import Page from './learn/Page';

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

在组件的 render 方法中返回 null 并不会影响组件的生命周期。例如，上面这个示例中，componentDidUpdate 依然会被调用。