解析エラー：予期しないトークンのconst

Question

私は現在、流星のアプリケーションを設定していると私はeslintとバベルを使用していますが、私は次のコードスニペットのために、次のエラーを取得：

const Navigation = props => (
    const classes = props.classes; 

    return (
    <div className={classes.root}> 
    </div> 
) 
); 

エラー：

2:4 - Parsing error: Unexpected token const 

私のeslint設定hereを再作成しました。 私.babelrc設定は以下の通りです：

{ 
    "presets": ["env", "react"] 
} 

Answer 1

あなたがarrow functionのconcise bodyを使用していて、それが()ない文の内部表現を期待していますので。ステートメントを使用するには()の代わりに{}を使用してblock bodyを使用する必要があります。このよう

：

const Navigation = props => { 
    const classes = props.classes; 

    return (
    <div className={classes.root}> 
    </div> 
) 
}; 

としてMDN Docあたり：

Arrow functions can have either a "concise body" or the usual "block body".

In a concise body, only an expression is needed, and an implicit return is attached. In a block body, you must use an explicit return statement.

Answer 2

@Mayankシュクラがsolutonを持っていますが、私はちょうどあなたにも行うことができることを追加したいです：

const Navigation = ({classes}) => (
    <div className={classes.root}> 
    </div> 
); 

({classes})部分は「破壊」と呼ばれ、基本的には関数が受け取るpropsパラメータからclassesプロパティを抽出していることを意味します。

これは任意の数のパラメータで実行できます。たとえば：

const Navigation = ({classes, children}) => (
    <div className={classes.root}> 
    {children} 
    </div> 
); 

は、より多くの情報のためMDN documentationを見てみましょう：

The destructuring assignment syntax is a JavaScript expression that makes it possible to unpack values from arrays, or properties from objects, into distinct variables.