2016-03-11 5 views
7

reaksiyona sokun, kullanılan söz dizimi:elemanları ve yağ ok fonksiyonları Redux örneklerde

const App =() => (
    <div> 
    <AddTodo /> 
    <VisibleTodoList /> 
    <Footer /> 
    </div> 
) 

yeni bir örnek uygulama ile yaklaşık oynuyor ve bu gibi kıvırcık parantez yerine parantez Yukarıdaki kodu yazım hatası:

const App =() => { 
    <div> 
    <AddTodo /> 
    <VisibleTodoList /> 
    <Footer /> 
    </div> 
} 

Aşağıdakilerin her ikisini de kaydediyorum ve sonuç aynı görünüyordu. Sorum şu, bu 2 arasındaki fark nedir ve neden parantez gibi tepki veriyor, ancak parantez içinde değil?

cevap

17

TL; DR

İlk örnek az ya da çok denk etmektir:

Ikinci az ya da çok denk etmektir
var App = function() { return <div>...</div>; }; 

:

var App = function() { <div>...</div>; }; 

Tepki muhtemelen şikayet ediyor ikinci örnekte hiçbir şey iade edilmiyor.

Biraz uzun

Versiyon en denklemin dışında tepki alalım. ES6 olarak böyle bir yağ ok işlevi oluşturabilirsiniz:

const getWord =() => { 
    return 'unicorn'; 
} 

Ve az kodla aynı şeyi yapmak için bir kısayol verilen konum:

const getWord =() => 'unicorn'; 

unicorn Eğer don' olsa bile döndürülür Hiç açık bir şekilde her yerde return yazın.

İlk örneğinizde, JSX'inizi paranteze sardınız. bizim basit örnekte eşdeğerdir:

const getWord =() => ('unicorn'); 

veya bu

const getWord =() => (
    'unicorn' 
); 

son dört örnek eşdeğerdir. Umarım yardımcı olur!

+0

Bu çok yardımcı olur. Teşekkürler. Yanıtınızı okuduktan sonra [MDN dokümanlar] 'a (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_Functions) göz attım ve şimdi çok daha mantıklı geliyor. . – MCaw