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
        )