What do the three dots represent in react?

The three dots in React represent the "extension operator"; in React, the extension operator is generally used for batch assignment of attributes, such as "var props = {};props.foo = x; props.bar = y;var component = <Component {...props} />;".

The operating environment of this tutorial: Windows 10 system, react version 18.0.0, Dell G3 computer.

react What do the three dots represent?

represents the "extension operator".

The ... operator (also called the spread operator) is already supported by ES6 arrays. It allows passing arrays or array-like functions directly as parameters of functions without going through apply.

var people=['Wayou','John','Sherlock'];
//sayHello函数本来接收三个单独的参数人一，人二和人三
function sayHello(people1,people2,people3){
    console.log(`Hello ${people1},${people2},${people3}`);
}
//但是我们将一个数组以拓展参数的形式传递，它能很好地映射到每个单独的参数
sayHello(...people);//输出：Hello Wayou,John,Sherlock 
//而在以前，如果需要传递数组当参数，我们需要使用函数的apply方法
sayHello.apply(null,people);//输出：Hello Wayou,John,Sherlock

In React, the extension operator is generally used for batch assignment of attributes. In JSX, you can use the ... operator to merge the key-value pair of an object with the props attribute of ReactElement.

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

It can also be mixed with ordinary XML attributes. It requires an attribute with the same name, and the latter will override the former:

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

Recommended learning: "react video tutorial"

The above is the detailed content of What do the three dots represent in react?. For more information, please follow other related articles on the PHP Chinese website!