구문 분석 오류 : 예기치 않은 토큰 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 Shukla가 soluton을 가지고,하지만 난 당신도 할 수 있다는 것을 추가하고 싶습니다 :

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

({classes}) 부분은 "destructuring"이라고하며 기본적으로 함수에서받는 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.