React学习之条件渲染

说明：本系列所有demo代码的github地址为：https://github.com/Brucewu998/react.js-learning，笔者会不断更新这些代码，本篇代码在目录下demo-07文件夹下。

条件渲染

在React中，我们可以根据不同的需求来创建不同的组件，有时候在一些特定的场景中，我们需要呈现不同的状态，这个时候我们就可以利用条件渲染来完成这个需求。React中的条件渲染和JavaScript中一样，使用if运算或者条件运算符创建元素表示当前的状态，然后可以根据这些条件运算来更新UI。

这里列举一个登录的例子，例如有如下组件：

function Greeting(props) {
    const isLoggedIn = props.isLoggedIn;
    if (isLoggedIn) {
        return <h1>欢迎回来</h1>
    }

    return <h1>请登录</h1> 
}

当向组件传递的isLoggedIn值为真时，表示登录状态，这个时候<h1>欢迎回来</h1>就会被渲染出来，反之，当为退出状态时，<h1>请登录</h1>就会被渲染出来。

当然，这里除了使用if来判断，也可使用三目运算符来进行条件渲染：

function Greeting(props) {
    return <h1>{props.isLoggedIn ? "欢迎回来" : "请登录"}</h1> 
}

由此我们可以看出，有些情况下使用三目运算符要比使用if条件判断代码更加简洁，但两者实现的功能一样。

下面将这个实例完整代码附上，这个在demo7_条件渲染.html：

class LoginControl extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            isLoggedIn: false
        }
        this.handleLoginClick = this.handleLoginClick.bind(this);
        this.handleLogoutClick = this.handleLogoutClick.bind(this);
    }

    handleLoginClick() {
        this.setState({isLoggedIn: true});
    }
    handleLogoutClick() {
        this.setState({isLoggedIn: false});
    }
    render() {
        const isLoggedIn = this.state.isLoggedIn;
        let button;
        if (isLoggedIn) {
            button = <LogoutButton onClick={ this.handleLogoutClick} />;
        } else {
            button = <LoginButton onClick={ this.handleLoginClick } />;
        }

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

上面代码涉及到两个组件：登录与退出：

function LoginButton(props) {
    return (
        <button onClick={ props.onClick }>
            登录
        </button>
    )
}

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

最终效果：

    

阻止条件渲染

有的情况下，我们希望隐藏一些已经渲染出来的组件，这个时候我们可以使render方法直接返回null，不进行任何渲染。

创建一个组件：

function WarningBanner(props) {
    if(!props.warn) {
        return null;
    }
    return (
        <div className="warning">
            这是一条警告!
        </div>
    );
}

当warn属性为false时，我们不返回任何元素，只返回null。这个时候就可以阻止条件渲染,完整代码在demo7_阻止组件渲染.html：

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>
                <button className="button" onClick={ this.handleToggleClick }>
                    {this.state.showWarning ? "隐藏" : "显示"}
                </button>
                <WarningBanner warn={ this.state.showWarning } />
            </div>
        )
    }
}

当我们点击显示的时候，会出现“这是一条警告”的提示，当点击隐藏的时候，则不会出现任何提示，因为这个时候传递的warn为false,返回的组件时null,所以render在渲染的时候渲染的内容为null,自然不会有仍和提示，效果如下图：

    

上一篇： React学习之事件处理

下一篇：