React条件性渲染

　　React条件性渲染的方式和Vue是不同的，之前用vue做项目时觉得vue是在是强大，通过v-if就可以选择性的渲染组件，另外，对于列表的渲染更是方便，一个v-for就可以进行快速的渲染，但是React无论在条件性渲染还是列表渲染，我觉得都非常的麻烦。 发点牢骚~ 也许后面可以体会到React的强大吧。 

　　官网上对于条件渲染有系统的介绍，下面列举两种常用的方式。

　　1、对于function 创建组件的方式，我们直接通过if(){}判断即可，如果符合条件，就return一个组件，如果不符合，就return另外一个。  

　　2、对于extends React.Component() 的方式，我们一般是在jsx中使用{}，来写js，常用的做法是 !!bool && <div></div> 这种方式，当然，我们还可以通过三目运算符的方式进行渲染。   

如下所示：

import React from 'react';

require('./log.less');

class Log extends React.Component {
    render () {
        var bool = this.props.isUp;
        return (
            <div className="sign-wrap">
                <h2>Wayne Chat</h2>
                <div className="form-control">
                    <label>用户名</label><br/>
                    <input type='text' />
                </div>
                <div className="form-control">
                    <label>密码</label><br/>
                    <input type='text' />
                </div>
                {
                    !!bool &&
                    <div className="form-control">
                        <label>确认密码</label><br/>
                        <input type='text' />
                    </div>
                }
                <div className="form-control">
                    <div className="sub-btn">{this.props.signStyle}</div>
                </div>
            </div>    

        );
    }
}

export default Log;