나는이 구문을 전에 본 적이 없으며 그것이 무엇에 관한 것인지 궁금합니다.

var { Navigation } = require('react-router');

왼쪽의 괄호는 구문 오류를 발생시킵니다.

예기치 않은 토큰 {

웹팩 구성의 어떤 부분이 변환되는지 또는 구문의 목적이 무엇인지 잘 모르겠습니다. 하모니인가요? 누군가 나를 깨달을 수 있습니까?

구조화 할당 이라고 하며 ES2015 표준 의 일부입니다 .

비 구조화 할당 구문은 배열 및 개체 리터럴의 구성을 미러링하는 구문을 사용하여 배열 또는 개체에서 데이터를 추출 할 수있게 해주는 JavaScript 식입니다.

출처 : MDN의 구조 분해 할당 참조

객체 분해

 var o = {p: 42, q: true};
 var {p, q} = o;

 console.log(p); // 42
 console.log(q); // true 

 // Assign new variable names
 var {p: foo, q: bar} = o;

 console.log(foo); // 42
 console.log(bar); // true

배열 분해

var foo = ["one", "two", "three"];

// without destructuring
var one   = foo[0];
var two   = foo[1];
var three = foo[2];

// with destructuring
var [one, two, three] = foo;

이것은 구조화 할당 입니다. ECMAScript 2015의 새로운 기능입니다.

var {
  AppRegistry,
  StyleSheet,
  Text,
  View,
} = React;

다음과 같습니다.

var AppRegistry = React.AppRegistry;
var StyleSheet = React.StyleSheet;
var Text = React.Text;
var View = React.View;

var { Navigation } = require('react-router');

... 비 구조화를 사용하여 ...

var Navigation = require('react-router').Navigation;

...하지만 훨씬 더 읽기 쉽습니다.

객체를 해체하는 ES6의 새로운 기능입니다.

우리 모두 알고 있듯이 여기에서 할당 작업이 발생합니다. 즉, 오른쪽 값이 왼쪽 변수에 할당된다는 의미입니다.

var { Navigation } = require('react-router');

이 경우 require('react-router')메소드는 다음과 같은 키 값 쌍을 가진 객체를 반환합니다.

{ Navigation: function a(){}, Example1: function b(){}, Example2: function c(){} }.

그리고 우리가 반환 된 객체에서 하나의 키를 가져오고 싶다면, 우리는 Navigation그것을 위해 Object destructing 을 사용할 수 있습니다 .

이것은 우리가 열쇠를 가지고있을 때만 가능할 것입니다.

따라서 대 입문 뒤에 지역 변수 Navigation는function a(){}

또 다른 예는 다음과 같습니다.

var { p, q } = { p: 1, q:2, r:3, s:4 };
console.log(p) //1;
console.log(q) //2;