Ba dấu chấm trong React làm gì?

Điều gì ...làm trong mã React (sử dụng JSX) này và nó được gọi là gì?

<Modal {...this.props} title='Modal heading' animation={false}>

Đó là ký hiệu lan truyền tài sản . Nó đã được thêm vào ES2018 (lây lan cho mảng / iterables trước đó, ES2015), nhưng nó đã được hỗ trợ trong các dự án React trong một thời gian dài thông qua dịch mã (vì " thuộc tính lây lan JSX " mặc dù bạn cũng có thể làm điều đó ở nơi khác ).

{...this.props} trải ra các thuộc tính vô số "của riêng" propsdưới dạng các thuộc tính riêng biệt trên Modalphần tử bạn đang tạo. Ví dụ, nếu this.propscó a: 1và b: 2, sau đó

<Modal {...this.props} title='Modal heading' animation={false}>

sẽ giống như

<Modal a={this.props.a} b={this.props.b} title='Modal heading' animation={false}>

Nhưng đó là tính năng động, do đó, bất kỳ thuộc tính "riêng" nào propscũng được bao gồm.

Vì childrenlà một tài sản "của riêng" trong props, nên sẽ bao gồm nó. Vì vậy, nếu thành phần xuất hiện này có các phần tử con, chúng sẽ được chuyển sang Modal. Đặt các yếu tố con giữa thẻ mở và thẻ đóng chỉ là đường cú pháp - loại tốt - để đặt một childrenthuộc tính vào thẻ mở. Thí dụ:

class Example extends React.Component {
  render() {
    const { className, children } = this.props;
    return (
      <div className={className}>
      {children}
      </div>
    );
  }
}
ReactDOM.render(
  [
    <Example className="first">
      <span>Child in first</span>
    </Example>,
    <Example className="second" children={<span>Child in second</span>} />
  ],
  document.getElementById("root")
);

.first {
  color: green;
}
.second {
  color: blue;
}

<div id="root"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

Ký hiệu lây lan không chỉ hữu ích cho trường hợp sử dụng đó mà còn để tạo một đối tượng mới với hầu hết (hoặc tất cả) các thuộc tính của một đối tượng hiện có - xuất hiện rất nhiều khi bạn cập nhật trạng thái, vì bạn không thể sửa đổi trạng thái trực tiếp:

this.setState(prevState => {
    return {foo: {...prevState.foo, a: "updated"}};
});

Điều đó thay thế this.state.foobằng một đối tượng mới với tất cả các thuộc tính giống như foongoại trừ thuộc atính, trở thành "updated":

const obj = {
  foo: {
    a: 1,
    b: 2,
    c: 3
  }
};
console.log("original", obj.foo);
// Creates a NEW object and assigns it to `obj.foo`
obj.foo = {...obj.foo, a: "updated"};
console.log("updated", obj.foo);

.as-console-wrapper {
  max-height: 100% !important;
}

Như bạn đã biết ...được gọi là Thuộc tính trải rộng mà tên đại diện cho nó cho phép một biểu thức được mở rộng.

var parts = ['two', 'three'];
var numbers = ['one', ...parts, 'four', 'five']; // ["one", "two", "three", "four", "five"]

Và trong trường hợp này (tôi sẽ đơn giản hóa nó).

//just assume we have an object like this:
var person= {
    name: 'Alex',
    age: 35 
}

Điều này:

<Modal {...person} title='Modal heading' animation={false} />

bằng

<Modal name={person.name} age={person.age} title='Modal heading' animation={false} />

Vì vậy, trong ngắn hạn, đó là một lối tắt gọn gàng , chúng ta có thể nói .

Ba dấu chấm đại diện cho Toán tử trải rộng trong ES6. Nó cho phép chúng tôi thực hiện khá nhiều thứ trong Javascript:

1. Mảng liên kết

   var shooterGames = ['Call of Duty', 'Far Cry', 'Resident Evil'];
   var racingGames = ['Need For Speed', 'Gran Turismo', 'Burnout'];
   var games = [...shooterGames, ...racingGames];
   
   console.log(games)  // ['Call of Duty', 'Far Cry', 'Resident Evil',  'Need For Speed', 'Gran Turismo', 'Burnout']

2. Phá hủy một mảng

     var shooterGames = ['Call of Duty', 'Far Cry', 'Resident Evil'];
     var [first, ...remaining] = shooterGames;
     console.log(first); //Call of Duty
     console.log(remaining); //['Far Cry', 'Resident Evil']

3. Kết hợp hai đối tượng

   var myCrush = {
     firstname: 'Selena',
     middlename: 'Marie'
   };
   
   var lastname = 'my last name';
   
   var myWife = {
     ...myCrush,
     lastname
   }
   
   console.log(myWife); // {firstname: 'Selena',
                        //   middlename: 'Marie',
                        //   lastname: 'my last name'}

Có một cách sử dụng khác cho ba dấu chấm được gọi là Tham số nghỉ và nó có thể đưa tất cả các đối số vào một hàm trong một mảng.

4. Hàm đối số là mảng

    function fun1(...params) { 
   
    }  

Ba dấu chấm trong JavaScript là toán tử trải / nghỉ .

Toán tử trải

Các cú pháp lây lan cho phép một biểu thức để được mở rộng ở những nơi nhiều đối số được mong đợi.

myFunction(...iterableObj);

[...iterableObj, 4, 5, 6]

[...Array(10)]

Thông số phần còn lại

Các phần còn lại cú pháp tham số được sử dụng cho các chức năng với số biến của tham số.

function(a, b, ...theArgs) {
  // ...
}

Toán tử trải / nghỉ cho mảng được giới thiệu trong ES6. Có một đề xuất Nhà nước 2 cho các thuộc tính trải / nghỉ đối tượng.

TypeScript cũng hỗ trợ cú pháp lây lan và có thể chuyển mã đó thành các phiên bản cũ hơn của ECMAScript với các vấn đề nhỏ .

Đây là một tính năng của ES6, cũng được sử dụng trong React. Nhìn vào ví dụ dưới đây:

function Sum(x,y,z) {
   return x + y + z;
}
console.log(Sum(1,2,3)); //6

Cách này là tốt nếu chúng ta có tối đa 3 tham số. Nhưng, nếu chúng ta cần thêm ví dụ 110 tham số. Chúng ta có nên định nghĩa tất cả chúng và thêm từng cái một không?

Tất nhiên có một cách dễ dàng hơn để làm, đó là SPREAD . Thay vì chuyển tất cả các tham số bạn viết:

function (...numbers){} 

Chúng tôi không biết chúng tôi có bao nhiêu tham số, nhưng chúng tôi biết có rất nhiều thông số. Dựa trên ES6, chúng ta có thể viết lại chức năng trên như dưới đây và sử dụng sự lây lan và ánh xạ giữa chúng để làm cho nó dễ dàng như một miếng bánh:

let Sum = (...numbers) => {
return numbers.reduce((prev, current) => prev + current );
}
console.log(Sum(1, 2, 3, 4, 5, 6, 7, 8, 9));//45

Nó chỉ định nghĩa các đạo cụ theo một cách khác trong JSX cho bạn!

Đó là sử dụng ...toán tử mảng và đối tượng trong ES6 (đối tượng chưa được hỗ trợ đầy đủ), vì vậy về cơ bản nếu bạn đã xác định đạo cụ của mình, bạn có thể chuyển nó cho phần tử của mình theo cách này.

Vì vậy, trong trường hợp của bạn, mã phải là một cái gì đó như thế này:

function yourA() {
  const props = {name='Alireza', age='35'};
  <Modal {...props} title='Modal heading' animation={false} />
}

vì vậy các đạo cụ bạn đã xác định, hiện được tách ra và có thể được sử dụng lại nếu cần thiết.

Nó bằng:

function yourA() {
  <Modal name='Alireza' age='35' title='Modal heading' animation={false} />
}

Đây là những trích dẫn từ nhóm React về toán tử trải rộng trong JSX:

Các thuộc tính trải rộng của JSX Nếu bạn biết tất cả các thuộc tính mà bạn muốn đặt trên một thành phần trước thời hạn, thì rất dễ sử dụng JSX:

var component = <Component foo={x} bar={y} />;

Đạo cụ tương tác là xấu
Nếu bạn không biết thuộc tính nào bạn muốn đặt, bạn có thể bị cám dỗ để thêm chúng vào đối tượng sau:

var component = <Component />;
component.props.foo = x; // bad
component.props.bar = y; // also bad

Đây là một mô hình chống vì nó có nghĩa là chúng tôi không thể giúp bạn kiểm tra propTypes đúng cho đến khi về sau. Điều này có nghĩa là các lỗi propTypes của bạn kết thúc bằng dấu vết ngăn xếp khó hiểu.

Các đạo cụ nên được coi là bất biến. Đột biến đối tượng đạo cụ ở một nơi khác có thể gây ra hậu quả không mong muốn, lý tưởng nhất là nó sẽ là một vật thể bị đóng băng vào thời điểm này.

Thuộc tính lây lan
Bây giờ bạn có thể sử dụng một tính năng mới của JSX được gọi là thuộc tính lây lan:

var props = {};
    props.foo = x;
    props.bar = y;
    var component = <Component {...props} />;

Các thuộc tính của đối tượng mà bạn truyền vào được sao chép vào đạo cụ của thành phần.

Bạn có thể sử dụng nhiều lần hoặc kết hợp nó với các thuộc tính khác. Thứ tự đặc điểm kỹ thuật là quan trọng. Các thuộc tính sau này ghi đè lên các thuộc tính trước đó.

var props = { foo: 'default' };
var component = <Component {...props} foo={'override'} />;
console.log(component.props.foo); // 'override'

Có gì với ... ký hiệu kỳ lạ?
Toán tử ... (hoặc toán tử trải) đã được hỗ trợ cho các mảng trong ES6. Ngoài ra còn có một đề xuất ECMAScript cho các thuộc tính nghỉ ngơi và trải rộng đối tượng. Chúng tôi đang tận dụng các tiêu chuẩn được hỗ trợ và phát triển này để cung cấp cú pháp rõ ràng hơn trong JSX.

Đối với những người đến từ thế giới Python, các thuộc tính lây lan của JSX tương đương với các danh sách đối số giải nén (Trình xử lý Python **).

Tôi biết đây là một câu hỏi về JSX, nhưng làm việc với các chất tương tự đôi khi giúp làm cho nó nhanh hơn.

Các ...(nhà điều hành lây lan) được sử dụng trong phản ứng với:

cung cấp một cách gọn gàng để truyền đạo cụ từ cha mẹ sang các thành phần con. ví dụ: đưa ra các đạo cụ này trong một thành phần cha mẹ,

this.props = {
  username: "danM",
  email: "dan@mail.com"
}

chúng có thể được truyền theo cách sau đây cho đứa trẻ,

<ChildComponent {...this.props} />

tương tự như thế này

<ChildComponent username={this.props.username} email={this.props.email} />

Nhưng cách sạch hơn.

Ba dấu chấm ...đại diện cho Toán tử trải rộng hoặc Tham số phần còn lại ,

Nó cho phép một biểu thức mảng hoặc chuỗi hoặc bất cứ thứ gì có thể lặp lại được mở rộng ở những nơi không có hoặc nhiều đối số cho các lệnh gọi hàm hoặc phần tử cho mảng được mong đợi.

• Hợp nhất hai mảng

var arr1 = [1,2,3];
var arr2 = [4,5,6];

arr1 = [...arr1, ...arr2];
console.log(arr1);  //[1, 2, 3, 4, 5, 6]

• Sao chép mảng:

var arr = [1, 2, 3];
var arr2 = [...arr];

console.log(arr); //[1, 2, 3]

Lưu ý: Cú pháp lây lan có hiệu quả đi sâu một cấp trong khi sao chép một mảng. Do đó, có thể không phù hợp để sao chép các mảng nhiều chiều như ví dụ sau đây cho thấy (nó giống với Object.assign () và cú pháp trải rộng).

• Thêm giá trị của một mảng vào mảng khác tại chỉ mục cụ thể, ví dụ 3:

var arr1 = [4,5]
var arr2 = [1,2,3,...arr1,6]
console.log(arr2);	// [1, 2, 3, 4, 5, 6]

• Khi gọi một hàm tạo với mới:

var dateFields = [1970, 0, 1];  // 1 Jan 1970
var d = new Date(...dateFields);

console.log(d);

• Truyền bá trong các đối tượng bằng chữ:

var obj1 = { foo: 'bar', x: 42 };
var obj2 = { foo: 'baz', y: 13 };

var clonedObj = { ...obj1 };
console.log(clonedObj);	//{foo: "bar", x: 42}

var mergedObj = { ...obj1, ...obj2 };
console.log(mergedObj);	//{foo: "baz", x: 42, y: 13}

Lưu ý rằng foothuộc tính của obj1 đã bị ghi đè bởi thuộc footính obj2

• Là một cú pháp tham số còn lại cho phép chúng ta biểu diễn số lượng đối số không xác định dưới dạng một mảng:

function sum(...theArgs) {
  return theArgs.reduce((previous, current) => {
    return previous + current;
  });
}

console.log(sum(1, 2, 3));	//6
console.log(sum(1, 2, 3, 4));	//10

Lưu ý: Chỉ có thể áp dụng cú pháp lây lan (trừ trường hợp thuộc tính lây lan) cho các đối tượng có thể lặp lại: Vì vậy, sau đây sẽ đưa ra lỗi

var obj = {'key1': 'value1'};
var array = [...obj]; // TypeError: obj is not iterable

Tham khảo1

Tài liệu tham khảo2

Thanh danh cho Brandon Morelli. Ông giải thích hoàn hảo ở đây , nhưng các liên kết có thể chết vì vậy tôi chỉ dán nội dung bên dưới:

Cú pháp lây lan chỉ đơn giản là ba dấu chấm: ... Nó cho phép một lần lặp mở rộng ở những nơi dự kiến ​​0+ đối số. Định nghĩa là khó khăn mà không có bối cảnh. Hãy khám phá một số trường hợp sử dụng khác nhau để giúp hiểu điều này có nghĩa là gì.

Ví dụ # 1 - Chèn Mảng Hãy xem mã dưới đây. Trong mã này, chúng tôi không sử dụng cú pháp lây lan:

var mid = [3, 4];
var arr = [1, 2, mid, 5, 6];

console.log(arr);

Ở trên, chúng tôi đã tạo ra một mảng có tên mid. Sau đó chúng ta tạo một mảng thứ hai chứa midmảng của chúng ta . Cuối cùng, chúng tôi đăng xuất kết quả. Bạn mong đợi gì arrđể in? Nhấn vào chạy ở trên để xem những gì xảy ra. Đây là đầu ra:

[1, 2, [3, 4], 5, 6]

Đó có phải là kết quả mà bạn mong đợi? Bằng cách chèn midmảng vào arrmảng, chúng tôi đã kết thúc với một mảng trong một mảng. Điều đó tốt nếu đó là mục tiêu. Nhưng nếu bạn chỉ muốn một mảng duy nhất có các giá trị từ 1 đến 6 thì sao? Để thực hiện điều này, chúng ta có thể sử dụng cú pháp lây lan! Hãy nhớ rằng, cú pháp lây lan cho phép các phần tử của mảng của chúng tôi mở rộng. Hãy nhìn vào mã dưới đây. Mọi thứ đều giống nhau - ngoại trừ chúng ta hiện đang sử dụng cú pháp trải rộng để chèn midmảng vào arrmảng:

var mid = [3, 4];
var arr = [1, 2, ...mid, 5, 6];

console.log(arr);

Và khi bạn nhấn nút chạy, đây là kết quả:

[1, 2, 3, 4, 5, 6]

Tuyệt vời! Ghi nhớ định nghĩa cú pháp lây lan mà bạn vừa đọc ở trên? Đây là nơi nó đi vào chơi. Như bạn có thể thấy, khi chúng ta tạo arrmảng và sử dụng toán tử trải trên midmảng, thay vì chỉ được chèn, midmảng sẽ mở rộng. Sự mở rộng này có nghĩa là mỗi và mọi phần tử trong midmảng được chèn vào arrmảng. Thay vì các mảng lồng nhau, kết quả là một mảng các số từ 1 đến 6.

Ví dụ # 2 - Math JavaScript có một đối tượng toán học tích hợp cho phép chúng ta thực hiện một số phép tính toán thú vị. Trong ví dụ này, chúng tôi sẽ xem xét Math.max(). Nếu bạn không quen, Math.max()trả về số lớn nhất bằng 0 hoặc nhiều hơn. Đây là vài ví dụ:

Math.max();
// -Infinity
Math.max(1, 2, 3);
// 3
Math.max(100, 3, 4);
// 100

Như bạn có thể thấy, nếu bạn muốn tìm giá trị tối đa của nhiều số, Math.max()yêu cầu nhiều tham số. Thật không may, bạn không thể đơn giản sử dụng một mảng duy nhất làm đầu vào. Trước cú pháp lây lan, cách dễ nhất để sử dụng Math.max()trên một mảng là sử dụng.apply()

var arr = [2, 4, 8, 6, 0];

function max(arr) {
  return Math.max.apply(null, arr);
}

console.log(max(arr));

Nó hoạt động, nó thực sự gây phiền nhiễu. Bây giờ hãy xem cách chúng tôi làm điều tương tự chính xác với cú pháp lây lan:

var arr = [2, 4, 8, 6, 0];
var max = Math.max(...arr);

console.log(max);

Thay vì phải tạo một hàm và sử dụng phương thức áp dụng để trả về kết quả Math.max(), chúng ta chỉ cần hai dòng mã! Cú pháp lây lan mở rộng các phần tử mảng của chúng ta và nhập từng phần tử trong mảng của chúng ta vào Math.max()phương thức!

Ví dụ # 3 - Sao chép một mảng Trong JavaScript, bạn không thể sao chép một mảng bằng cách đặt một biến mới bằng với mảng đã có. Xem xét ví dụ mã sau:

var arr = ['a', 'b', 'c'];
var arr2 = arr;

console.log(arr2);

Khi bạn nhấn chạy, bạn sẽ nhận được đầu ra sau:

['a', 'b', 'c']

Bây giờ, thoạt nhìn, có vẻ như nó đã hoạt động - có vẻ như chúng tôi đã sao chép các giá trị của mảng vào mảng2. Nhưng đó không phải là những gì đã xảy ra. Bạn thấy, khi làm việc với các đối tượng trong javascript (mảng là một loại đối tượng) chúng ta gán theo tham chiếu, không phải theo giá trị. Điều này có nghĩa là Array2 đã được gán cho cùng một tham chiếu như mảng. Nói cách khác, bất cứ điều gì chúng ta làm với mảng 2 cũng sẽ ảnh hưởng đến mảng mảng ban đầu (và ngược lại). Hãy xem bên dưới:

var arr = ['a', 'b', 'c'];
var arr2 = arr;

arr2.push('d');

console.log(arr);

Ở trên, chúng tôi đã đẩy một phần tử mới d vào mảng2. Tuy nhiên, khi chúng tôi đăng xuất giá trị của mảng, bạn sẽ thấy giá trị d cũng được thêm vào mảng đó:

['a', 'b', 'c', 'd']

Không cần phải sợ! Chúng ta có thể sử dụng toán tử lây lan! Hãy xem xét mã dưới đây. Nó gần giống như trên. Thay vào đó, chúng tôi đã sử dụng toán tử trải rộng trong một cặp dấu ngoặc vuông:

var arr = ['a', 'b', 'c'];
var arr2 = [...arr];

console.log(arr2);

Lượt chạy và bạn sẽ thấy đầu ra dự kiến:

['a', 'b', 'c']

Ở trên, các giá trị mảng trong mảng được mở rộng để trở thành các phần tử riêng lẻ sau đó được gán cho mảng2. Bây giờ chúng ta có thể thay đổi mảng Array2 nhiều như chúng ta muốn mà không có hậu quả trên mảng mảng ban đầu:

var arr = ['a', 'b', 'c'];
var arr2 = [...arr];

arr2.push('d');

console.log(arr);

Một lần nữa, lý do này hoạt động là vì giá trị của mảng được mở rộng để điền vào dấu ngoặc của định nghĩa mảng Array2 của chúng tôi. Vì vậy, chúng tôi đang đặt Array2 bằng với các giá trị riêng lẻ của mảng thay vì tham chiếu đến mảng như chúng tôi đã làm trong ví dụ đầu tiên.

Ví dụ về phần thưởng - Chuỗi thành mảng Là một ví dụ thú vị cuối cùng, bạn có thể sử dụng cú pháp trải rộng để chuyển đổi một chuỗi thành một mảng. Chỉ cần sử dụng cú pháp lây lan trong một cặp dấu ngoặc vuông:

var str = "hello";
var chars = [...str];

console.log(chars);

Ba dấu chấm (...)được gọi là toán tử trải rộng và về mặt khái niệm tương tự như toán tử trải rộng mảng ES6, JSX tận dụng các tiêu chuẩn được hỗ trợ và phát triển này để cung cấp một cú pháp rõ ràng hơn trong JSX

Truyền các thuộc tính trong bộ khởi tạo đối tượng sao chép các thuộc tính có thể đếm được từ một đối tượng được cung cấp lên đối tượng mới được tạo.

let n = { x, y, ...z };
n; // { x: 1, y: 2, a: 3, b: 4 }

Tài liệu tham khảo:

1) https://github.com/sebmarkbage/ecmascript-rest-s lây # s lây -properies

2) https://facebook.github.io/react/docs/jsx-s lây.html

Ý nghĩa của ... phụ thuộc vào nơi bạn sử dụng nó trong mã,

1. Được sử dụng để trải / sao chép mảng / đối tượng - Nó giúp sao chép mảng / đối tượng và cũng thêm các giá trị mảng mới / thêm thuộc tính mới vào đối tượng, là tùy chọn.

const numbers = [1,2,3];
const newNumbers = [...numbers, 4];
console.log(newNumbers) //prints [1,2,3,4] 

const person = {
 name: 'Max'
};

const newPerson = {...person, age:28};
console.log(newPerson); //prints {name:'Max', age:28}

2. Được sử dụng để hợp nhất các đối số hàm thành một mảng duy nhất - Sau đó, bạn có thể sử dụng các hàm mảng trên nó.

const filter = (...args) => {
   return args.filter(el => el ===1);
}

console.log(filter(1,2,3)); //prints [1] 

Đây là một toán tử lây lan ...

Ví dụ nếu bạn có một mảng first=[1,2,3,4,5]và khác second=[6,7,8].

[...first, ...second] //result is [1,2,3,4,5,6,7,8]

Điều tương tự cũng có thể được thực hiện với các đối tượng json.

Nói tóm lại, ba dấu chấm ...là toán tử trải rộng trong ES6 (ES2015). Toán tử lây lan sẽ lấy tất cả dữ liệu.

let a = [1, 2, 3, 4];
let b = [...a, 4, 5, 6];
let c = [7,8,...a];


console.log(b);

Sẽ cho kết quả [1,2,3,4,5,6]

console.log(c);

Sẽ cho kết quả [7,8,1,2,3,4]

Thường được gọi là toán tử trải rộng, nó được sử dụng để mở rộng bất cứ nơi nào được yêu cầu

thí dụ

const SomeStyle = {
   margin:10,
   background:#somehexa
}

bạn có thể sử dụng điều này bất cứ khi nào bạn yêu cầu nhiều hơn về cú pháp trải rộng toán tử .

Thuộc tính lây lan được sử dụng để vượt qua nhiều thuộc tính theo cách đơn giản

{... this.props} đang nắm giữ tài sản của this.props

Sử dụng Toán tử trải rộng {...} với các đạo cụ bên dưới

this.props = 
 { 
    firstName: 'Dan', 
    lastName: 'Abramov', 
    city: 'New York',
    country: 'USA' 
}

Không có {...} Lây lan

<Child 
  firstName={this.props.firstName}
  lastName={this.props.lastName}
  city={this.props.city}
  country={this.props.country}

> 

Với {...} Lan truyền

<Child { ...this.props } />

Tweet của Dan Abramov về toán tử lây lan (Người tạo ra Redux)

... Cú pháp này là một phần của ES6 và không phải là thứ mà bạn chỉ có thể sử dụng trong React. Nó có thể được sử dụng theo hai cách khác nhau; với tư cách là toán tử trải rộng HOẶC như một tham số nghỉ ngơi. Bạn có thể tìm hiểu thêm từ bài viết này: https://www.techiediaries.com/react-siverse-operator-props-setstate/

những gì bạn đã đề cập trong câu hỏi là một cái gì đó như thế này, hãy giả sử như thế này,

    function HelloUser() {
      return <Hello Name="ABC" City="XYZ" />;
    }

với việc sử dụng toán tử trải rộng, bạn có thể truyền đạo cụ cho thành phần như thế này.

     function HelloUser() {
       const props = {Name: 'ABC', City: 'XYZ'};
       return <Hello {...props} />;
     }

Đó là thực tế phổ biến để vượt qua các đạo cụ xung quanh trong một ứng dụng React. Khi thực hiện điều này, chúng tôi có thể áp dụng các thay đổi trạng thái cho thành phần con bất kể nó là Pure hay Impure (không trạng thái hay trạng thái). Có những lúc cách tiếp cận tốt nhất, khi chuyển qua các đạo cụ, là chuyển qua các thuộc tính số ít hoặc toàn bộ đối tượng của các thuộc tính. Với sự hỗ trợ cho các mảng trong ES6, chúng tôi đã đưa ra ký hiệu "..." và với điều này, giờ đây chúng tôi có thể đạt được việc truyền toàn bộ một đối tượng cho một đứa trẻ.

Quá trình truyền đạo cụ điển hình cho trẻ được ghi chú với cú pháp này:

var component = <Component foo={x} bar={y} />;

Điều này là tốt để sử dụng khi số lượng đạo cụ là tối thiểu nhưng trở nên không thể quản lý khi số prop trở nên quá cao. Một vấn đề với phương thức này xảy ra khi bạn không biết các thuộc tính cần thiết trong một thành phần con và phương thức JavaScript điển hình là đơn giản đặt các thuộc tính đó và liên kết với đối tượng sau này. Điều này gây ra sự cố với kiểm tra propType và lỗi theo dõi ngăn xếp mật mã không hữu ích và gây ra sự chậm trễ trong việc gỡ lỗi. Sau đây là một ví dụ về thực hành này và những điều không nên làm:

var component = <Component />;
component.props.foo = x; // bad
component.props.bar = y;

Kết quả tương tự này có thể đạt được nhưng với thành công phù hợp hơn bằng cách làm điều này:

var props = {};
props.foo = x;
props.bar = y;
var component = Component(props); // Where did my JSX go?

Nhưng không sử dụng lây lan JSX hoặc JSX để lặp lại phương trình này, bây giờ chúng ta có thể làm một cái gì đó như thế này:

var props = {};
props.foo = x;
props.bar = y;
var component = <Component {...props} />;

Các thuộc tính có trong "... đạo cụ" là foo: x, bar: y. Điều này có thể được kết hợp với các thuộc tính khác để ghi đè các thuộc tính của "... đạo cụ" bằng cú pháp này:

var props = { foo: 'default' };
var component = <Component {...props} foo={'override'} />;
console.log(component.props.foo); // 'override'

Ngoài ra, chúng ta có thể sao chép các đối tượng thuộc tính khác lên nhau hoặc kết hợp chúng theo cách này:

var oldObj = { foo: 'hello', bar: 'world' };
var newObj = { ...oldObj, foo: 'hi' };
console.log(newObj.foo); // 'hi';
console.log(newObj.bar); // 'world';

Hoặc hợp nhất hai đối tượng khác nhau như thế này (điều này chưa có trong tất cả các phiên bản phản ứng):

var ab = { ...a, ...b }; // merge(a, b)

Một cách khác để giải thích điều này, theo trang web Reac / docs của Facebook là:

Nếu bạn đã có "đạo cụ" làm đối tượng và bạn muốn truyền nó trong JSX, bạn có thể sử dụng "..." làm toán tử SPREAD để truyền toàn bộ đối tượng đạo cụ. Hai ví dụ sau là tương đương:

function App1() {
  return <Greeting firstName="Ben" lastName="Hector" />;
}



function App2() {
  const props = {firstName: 'Ben', lastName: 'Hector'};
  return <Greeting {...props} />;
}

Thuộc tính lây lan có thể hữu ích khi bạn đang xây dựng các thùng chứa chung. Tuy nhiên, họ cũng có thể làm cho mã của bạn trở nên lộn xộn bằng cách giúp dễ dàng chuyển nhiều đạo cụ không liên quan đến các thành phần không quan tâm đến chúng. Cú pháp này nên được sử dụng một cách tiết kiệm.

Nó được gọi là toán tử lây lan. Ví dụ: let hello = {name: '', dir: ''} let hello1 = {... hello} Bây giờ thuộc tính đối tượng hello được sao chép vào hello1.

Nó được gọi là cú pháp lây lan trong javascript.

Nó sử dụng để phá hủy một mảng hoặc đối tượng trong javascript.

thí dụ:

const objA = { a: 1, b: 2, c: 3 }
const objB = { ...objA, d: 1 }
/* result of objB will be { a: 1, b: 2, c: 3, d: 1 } */
console.log(objB)

const objC = { ....objA, a: 3 }
/* result of objC will be { a: 3, b: 2, c: 3, d: 1 } */
console.log(objC)

Bạn có thể làm điều đó với kết quả tương tự với Object.assign()chức năng trong javascript.

Tham khảo: Cú pháp lây lan

Điều này sẽ được tổng hợp thành:

React.createElement(Modal, { ...this.props, title: "Modal heading", animation: false }, child0, child1, child2, ...)

nơi nó cung cấp thêm hai thuộc tính title& animationngoài propsphần tử máy chủ có.

...là toán tử ES6 có tên là Spread .

Xem https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/S rải_syntax

toán tử trải rộng (toán tử ba) giới thiệu trong tập lệnh ecama 6 (ES6) .Ecama script (ES6) là một trình bao bọc của javascript.

điều hành trải rộng tài sản vô số trong đạo cụ. this .props = {firstName: 'Dan', lastName: 'Abramov', city: 'New York', country: 'USA'}

{... this.props} = {FirstName: 'Dan', lastName: 'Abramov', city: 'New York', country: 'USA'}

Nhưng toán tử trải rộng tính năng chính được sử dụng cho một kiểu tham chiếu.

For example
let person= {
    name: 'Alex',
    age: 35 
}
person1= person;

person1.name = "Raheel";

console.log( person.name); // output: Raheel

Đây được gọi là kiểu tham chiếu, một đối tượng ảnh hưởng đến các đối tượng khác vì chúng có thể chia sẻ trong bộ nhớ. Nếu bạn nhận được giá trị độc lập có nghĩa là bộ nhớ trải đều sử dụng toán tử trải.

 let person= {
        name: 'Alex',
        age: 35 
    }
person2 = {...person};

person2.name = "Shahzad";

console.log(person.name); // output: Alex

nếu bạn có một mảng các phần tử và bạn muốn hiển thị các phần tử bạn chỉ sử dụng ... mảng, và nó sẽ lặp lại trên tất cả các phần tử

...(ba dấu chấm trong Javascript) được gọi là Toán tử trải rộng hoặc Toán tử trải rộng. Điều này cho phép một iterable như một biểu thức mảng hoặc chuỗi được mở rộng hoặc một đối tượng biểu thức được mở rộng bất cứ nơi nào được đặt. Điều này không cụ thể đối với React. Nó là một toán tử Javascript.

Tất cả những câu trả lời ở đây đều hữu ích, nhưng tôi muốn liệt kê các trường hợp sử dụng thực tế được sử dụng nhiều nhất của Cú pháp lây lan (Toán tử trải rộng).

1. Mảng kết hợp (Mảng liên kết)

Có nhiều cách khác nhau để kết hợp các mảng , nhưng toán tử trải rộng cho phép bạn đặt nó ở bất kỳ vị trí nào trong một mảng. Nếu bạn muốn kết hợp hai mảng và đặt các phần tử tại bất kỳ điểm nào trong mảng, bạn có thể làm như sau:

var arr1 = ['two', 'three'];
var arr2 = ['one', ...arr1, 'four', 'five'];

// arr2 = ["one", "two", "three", "four", "five"]

2. Sao chép mảng

Khi chúng tôi muốn có một bản sao của một mảng, chúng tôi đã từng sử dụng phương thức Array.prototypr.slice () . Nhưng, bạn có thể làm tương tự với toán tử trải.

var arr = [1,2,3];
var arr2 = [...arr];
// arr2 = [1,2,3]

3. Chức năng gọi mà không áp dụng

Trong ES5, để truyền một mảng gồm hai số cho doStuff()hàm, bạn thường sử dụng phương thức Function.prototype.apply () như sau:

function doStuff (x, y, z) { }
var args = [0, 1, 2];

// Call the function, passing args
doStuff.apply(null, args);

Tuy nhiên, bằng cách sử dụng toán tử trải, bạn có thể truyền một mảng vào hàm.

doStuff(...args);

4. Mảng phá hủy

Bạn có thể sử dụng hàm hủy và toán tử còn lại để trích xuất thông tin thành các biến như bạn muốn:

let { x, y, ...z } = { x: 1, y: 2, a: 3, b: 4 };
console.log(x); // 1
console.log(y); // 2
console.log(z); // { a: 3, b: 4 }

5. Các đối số chức năng như các tham số nghỉ ngơi

ES6 cũng có ba dấu chấm (...) là tham số phần còn lại thu thập tất cả các đối số còn lại của hàm thành một mảng.

function f(a, b, ...args) {
  console.log(args);
}

f(1,2,3,4,5);
// [ 3, 4, 5 ]

6. Sử dụng các hàm toán học

Bất kỳ hàm nào trong đó lây lan được sử dụng làm đối số có thể được sử dụng bởi các hàm có thể chấp nhận bất kỳ số lượng đối số.

let numbers = [9, 4, 7, 1];
Math.min(...numbers); // 1

7. Kết hợp hai đối tượng

Bạn có thể sử dụng toán tử trải để kết hợp hai đối tượng. Đây là một cách dễ dàng và sạch sẽ hơn để làm điều đó.

var carType = {
  model: 'Toyota',
  yom: '1995'
};

var carFuel = 'Petrol';

var carData = {
  ...carType,
  carFuel
}

console.log(carData); 
// {
//  model: 'Toyota',
//  yom: '1995',
//  carFuel = 'Petrol'
// }

8. Tách một chuỗi thành các ký tự riêng biệt

Bạn có thể sử dụng toán tử trải rộng để trải một chuỗi thành các ký tự riêng biệt.

let chars = ['A', ...'BC', 'D'];
console.log(chars); // ["A", "B", "C", "D"]

Bạn có thể nghĩ ra nhiều cách hơn để sử dụng Toán tử trải rộng. Những gì tôi đã liệt kê ở đây là các trường hợp sử dụng phổ biến của nó.

Đây là một tính năng mới trong ES6 / Harmony. Nó được gọi là Toán tử trải rộng. Nó cho phép bạn tách các phần cấu thành của một mảng / đối tượng hoặc lấy nhiều mục / tham số và dán chúng lại với nhau. Đây là một ví dụ:

let array = [1,2,3]
let array2 = [...array]
// array2 is now filled with the items from array

Và với một đối tượng / khóa:

// lets pass an object as props to a react component
let myParameters = {myKey: 5, myOtherKey: 7}
let component = <MyComponent {...myParameters}/>
// this is equal to <MyComponent myKey=5 myOtherKey=7 />

Điều thực sự tuyệt vời là bạn có thể sử dụng nó để có nghĩa là "phần còn lại của các giá trị".

const myFunc = (value1, value2, ...values) {
    // Some code
}

myFunc(1, 2, 3, 4, 5)
// when myFunc is called, the rest of the variables are placed into the "values" array

Những người được gọi là lây lan. Đúng như tên gọi. Nó có nghĩa là nó đặt bất cứ giá trị nào của nó vào các mảng hoặc các đối tượng đó.

Nhu la :

let a = [1, 2, 3];
let b = [...a, 4, 5, 6];
console.log(b);
> [1, 2, 3, 4, 5, 6]