JSX nicht ausgewertet ganze Zahl im Ausdruck als boolean

Question

Ich bin es gewohnt, schreiben optionale Komponenten wie diese machen:

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

Diese Stenografie if wird im if/else in JSX guide als unmittelbar beschworene Funktion Ausdruck erwähnt. Seit meinem letzten Update von React wurde 0 anstelle von null gerendert.

Here is a jsfiddle

Warum geschieht das?

Answer 1

Die && Betreiber auswertet verändert hatte der linke Ausdruck zuerst, und wenn der linke Ausdruck zu etwas falsy ergibt, gibt den Wert des linken Ausdrucks zurück, ohne Pelz auszuwerten ther.

So (0 && "Bar") wertet 0 aus, die dann als eine Zeichenfolge gerendert wird. Wenn alle Falsy-Werte im Rendering verworfen würden, wäre es nicht möglich, in React einen 0 zu drucken, zum Beispiel würde length is { 0 } nur length is drucken.

jedoch false, null und undefined werden durch Reagieren Renderer verworfen, wenn als Kind, und es ist 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 

Sie den Ausdruck linken benötigen Ihre && Betreiber einen von denen drei zurück, das einfachste Sein ein Boolean:

(!!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

Ich würde schreiben Sie es wie

length ? <Bar /> : void(0)

Reagieren nicht etwas machen, das undefined ist, und mit void(0) Sie garantieren, dass keine Bibliothek den Wert von undefined