react 三目运算符

var Divider=React.createClass({
            getInitialState:function(){
                return {isComplete:false}
            },
            render:function(){
                return (
                        <div className={this.state.isComplete ? 'is_complete' : ''}>
                            <h2>{this.props.children}</h2><hr />
                        </div>
                    
                    )
            }
        });
        React.render(
            <Divider />questions</Divider>,
            document.body
        )

前面的引入JS文件就不续写了，直接上代码，可以试试看，一定要给一个初始值getInitialState，要不然会报错！

使用变量的三目运算符：

var Divider=React.createClass({
            getInitialState:function(){
                return {isComplete:true}
            },
            getIsComplete:function(){
                return this.state.isComplete ? 'is_complete' :'';
            },
            render:function(){
                var isComplete=this.getIsComplete();
                return (
                    <div className={isComplete}>
                        <h2>{this.props.children}</h2>
                    </div>
                )
            }
        });
        React.render(
            <Divider>questions</Divider>,
            document.body
        )

使用函数的三目运算符：

var Divider=React.createClass({
            getInitialState:function(){
                return {isComplete:true}
            },
            getIsComplete:function(){
                return this.state.isComplete ? 'is_complete' :'';
            },
            render:function(){

                return (
                    <div className={this.getIsComplete()}>
                        <h2>{this.props.children}</h2>
                    </div>
                )
            }
        });
        React.render(
            <Divider>questions</Divider>,
            document.body
        )