ReactJS return条件判断のいくつかの形式

原文の住所:http://blog.csdn.net/yf275908654/article/details/51078215
Reactでは、1つのコンポーネントのHTMLタグは、これらのラベルを生成するコードと内在的に密接に関連している.これは、循環や条件判断など、JavaScriptの強力な魔力を容易に利用できることを意味します.
コンポーネントに条件判定を追加したいですが、if/elseロジックはHTMLタグで表現しにくいです.JSXに直接if文を入れると無効なjavascriptが描画されます.

var IvanIf = React.createClass({
    render: function () {
        return(
        
            
if(true){ 'is-complete' }}> ... 
        );
    }
});

1

,

4

5

,

,

8

1

,

4

5

,

,

8

解決の方法は以下の通りです.

は、3つの演算子

を使用する.

は変数を設定し、属性に

を参照する.

論理情報を関数にカプセル化する

.

使用&演算子

三目演算子

var IvanIf = React.createClass({
    getInitialState:function () {
        return { isComplete:true };
    },
    render: function () {
        return(
            
this.state.isComplete ? 'is-complete' : '' }> Hello Ivan .
        );
    }
});

1

,

4

5

,

,

8

9,

10

1

,

4

5

,

,

8

9,

10

以上の3つの演算子は正常に動作しますが、他の場合はうまく活用したいです. Componentの場合、重くて面倒に見えるかもしれませんので、この方法はおすすめしません.

使用変数

var IvanIf = 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 }> Hello Ivan .div>
        );
    }
});

1

,

4

5

,

,

8

9,

10

11

1

,

4

5

,

,

8

9,

10

11

条件判定を単独で外し、レンダーで関数呼び出しという形で条件結果を取得します.

使用関数

var IvanIf = React.createClass({
    getInitialState:function () {
        return { isComplete:false };
    },
    getIsComplete:function(){
      return this.state.isComplete ? 'is-complete' : '' ;
    },
    render: function () {
        return(
            
this.getIsComplete() }> Hello Ivan .
        );
    }
});

1

,

4

5

,

,

8

9,

10

11

1

,

4

5

,

,

8

9,

10

11

勇気があって并び卵のは足を急ぎます

論理和(&)演算子を使用する

var IvanIf = React.createClass({
    getInitialState:function () {
        return { isComplete:false };
    },
    render: function () {
        return(
            
this.state.isComplete && 'is-complete' }> Hello Ivan .
        );
    }
});

1

,

4

5

,

,

8

9,

10

1

,

4

5

,

,

8

9,

10

nullまたはfalse値に対しては、Reactは何も出力されないので、条件判定は、希望文字列に続くバックのbollan値を使用して実施されてもよい.  このbootlean値がtrueであれば、後続の文字列が使用され、逆に使用されない.