2016-09-22 18 views
17

私はES6とReactの両方に新しく、矢印機能を見続けています。いくつかの矢印関数が太い矢印の後に中括弧を使用し、いくつかはかっこを使用するのはなぜですか?たとえば :任意の助け中括弧なしの矢印機能

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

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

ありがとう!

答えて

32

括弧は、単一の値を返すされ、中括弧は、複数行のコードを実行しています。複数の「行」のように見えますが、実際には1つだけにコンパイルされJSXを使用しているため

あなたの例では、混乱に見える「要素」。ここで

はすべて同じことを行ういくつかのより多くの例を示します。

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

それはコードブロックとして扱いパーサを回避するための方法ですので、あなたはまた、多くの場合、オブジェクトリテラルの周りに括弧が表示されます。

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

恐縮です、ありがとうございます。それは私が得ている他のいくつかのエラーを理解するのにも役立ちます。私は一度それが正しいと認めます。ありがとうdavid – dkimot