Tôi chưa nhìn thấy cú pháp này trước đây và tôi đang tự hỏi nó là gì.

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

Các dấu ngoặc ở bên trái đang gây ra lỗi cú pháp:

mã thông báo bất ngờ {

Tôi không chắc phần nào của cấu hình webpack đang chuyển đổi hoặc mục đích của cú pháp là gì. Nó có phải là một điều Hòa hợp? Ai đó có thể khai sáng cho tôi không?

Nó được gọi là phân công cơ cấu lại và nó là một phần của tiêu chuẩn ES2015 .

Cú pháp gán hủy cấu trúc là một biểu thức JavaScript giúp bạn có thể trích xuất dữ liệu từ các mảng hoặc đối tượng bằng cách sử dụng cú pháp phản ánh cấu trúc của các ký tự mảng và đối tượng.

Nguồn: Tham khảo chuyển nhượng cơ cấu trên MDN

Cấu trúc đối tượng

 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

Cấu trúc mảng

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;

Đây là nhiệm vụ tái cấu trúc . Đó là một tính năng mới của ECMAScript 2015.

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

Tương đương với:

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

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

... sử dụng cấu trúc hủy để đạt được điều tương tự như ...

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

... nhưng dễ đọc hơn nhiều.

Đó là một tính năng mới trong ES6 để phá hủy các đối tượng.

Như chúng ta đều biết rằng có một hoạt động gán diễn ra ở đây, Điều đó có nghĩa là giá trị bên phải đang được gán cho biến bên trái.

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

Trong trường hợp này, require('react-router')phương thức trả về một đối tượng có cặp giá trị khóa, một số thứ như

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

Và nếu chúng ta muốn lấy một khóa trong đối tượng trả về đó, nói Navigationvới một biến, chúng ta có thể sử dụng đối tượng hủy cho điều đó.

Điều này chỉ có thể thực hiện được nếu chúng ta có chìa khóa hít vào.

Vì vậy, sau câu lệnh gán, biến cục bộ Navigationsẽ chứafunction a(){}

Một ví dụ khác trông như thế này.

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