JSXは、私はこのようなオプションのコンポーネントをレンダリング書き込むために使用しています

Question

ブール

として式の整数を評価しない：

var Foo = React.createClass({ 
    render: function() { 
    var length = 0; 
    return <div>Foo {length && <Bar />}</div>; 
    } 
}); 

この速記ifはif/else in JSX guideとしてすぐに、呼び出された関数式に記載されています。しかし、Reactの最新の更新以来、nullの代わりに0がレンダリングされ始めました。

Here is a jsfiddle

は、なぜそれが起こっているのでしょうか？

Answer 1

&&オペレータ評価さの値を変更したことを保証するものではありません、それを記述します左側の式が最初に偽であると評価された場合、は、左側の式の値をファーを評価せずに返しますあなた。

したがって、(0 && "Bar")は、0と評価され、文字列としてレンダリングされます。レンダリングですべての偽値が破棄された場合、0をReactに印刷する方法はありません。たとえば、length is { 0 }はlength isのみを出力します。

しかしfalse、nullとundefinedは子として使用した場合、レンダラを反応させるので廃棄され、そしてそれはexactly for this use caseですされています

length is { 0 } // length is 0 
length is { NaN} // length is NaN 
length is { null } // length is 
length is { false } // length is 
length is { undefined } // length is 

あなたはこれらの3つのいずれかを返すために、あなたの&&演算子の左側の式を必要とし、最も単純なものはブール値です。

(!!length && "Bar") // evaluates to false, doesn't print 
((length > 0) && "Bar") // evaluates to false, doesn't print 
((length != 0) && "Bar") // evaluates to false, doesn't print 
(Boolean(length) && "Bar") // evaluates to false, doesn't print 

Answer 2

length ? <Bar /> : void(0)

が反応のように、私はundefinedある何かをレンダリングし、void(0)にあなたがいない任意のライブラリがundefined