Arrow-Funktion ohne geschweifte Klammern

Question

Ich bin neu bei beiden ES6 und React und ich sehe immer Pfeilfunktionen. Warum verwenden einige Pfeilfunktionen geschweifte Klammern nach dem Fettpfeil und einige Klammern? Zum Beispiel:

const foo = (params) => (
    <span> 
     <p>Content</p> 
    </span> 
); 

gegen

const handleBar = (e) => { 
    e.preventDefault(); 
    dispatch('logout'); 
}; 

Vielen Dank für jede Hilfe!

Answer 1

Die Klammern geben einen einzelnen Wert zurück, die geschweiften Klammern führen mehrere Codezeilen aus.

Ihr Beispiel sieht verwirrend, weil es JSX ist mit der wie mehrere „Linien“ aussieht, aber eigentlich wird nur zu einem einzigen zusammen „Elemente“.

Hier sind einige weitere Beispiele, die alle dasselbe tun:

const a = (who) => "hello " + who + "!"; 
const b = (who) => (
    "hello " + 
    who + 
    "!" 
); 
const c = (who) => { 
    return "hello " + who + "!"; 
}; 

Sie werden auch um Objektliterale sehen oft Klammer, denn das ist ein Weg, den Parser behandeln es als Codeblock zu vermeiden:

const x =() => {} // Does nothing 
const y =() => ({}) // returns an object