2016-03-11 4 views
7

を反応させ、使用する構文は次のとおり、要素及び脂肪矢印機能Reduxの例で

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

I新しい例えばアプリの周りいじるなどのような中括弧の代わりに括弧付き上記のコードを誤って入力した

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

コンソールに次の両方が記録され、結果が同じように見えました。私の質問は、これらの2の違いは何ですか?なぜかっこのように反応しますが、中括弧は反応しません。

答えて

17

TL; DR

あなたの最初の例では、多かれ少なかれ同等である:あなたの第二の多かれ少なかれ相当

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

ある:

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

はおそらく訴えている反応させ2番目の例では何も返されていません。

は少し長い

バージョンのは、方程式のうち、リアクトてみましょう。あなたはこのように脂肪の矢印関数を作成することができES6で:

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

をそして、我々はより少ないコードで同じことを行うためのショートカットを与えている:

const getWord =() => 'unicorn'; 

unicornは、「あなたはドンにもかかわらず、返されます明示的にreturnと入力してください。

最初の例では、JSXをかっこで囲みました。私たちの単純な例では同等です:

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

またはこの

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

最後の4つの例は等価です。希望が助けてくれる!

+0

これは大いに役立ちます。ありがとう。あなたの応答を読んだあと、 [MDN docs](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions)を見てみました。 。 – MCaw