什么是…在这个React(使用JSX)代码中做什么,它被称为什么?
<Modal {...this.props} title='Modal heading' animation={false}>
什么是…在这个React(使用JSX)代码中做什么,它被称为什么?
<Modal {...this.props} title='Modal heading' animation={false}>
当前回答
这是ES6的一个特性,在React中也使用了这个特性。请看下面的例子:
function Sum(x, y, z) {
return x + y + z;
}
console.log(Sum(1, 2, 3)); // 6
如果我们最多有三个参数,这种方式很好。但是,如果我们需要添加,例如,110个参数。我们是否应该定义它们并逐个添加它们?
当然,有一种更简单的方法,叫做扩散。 而不是传递所有这些参数,你写:
function (...numbers){}
我们不知道有多少参数,但我们知道有很多。
基于ES6,我们可以重写上面的函数如下所示,并使用它们之间的扩展和映射,使其变得简单如一块蛋糕:
let Sum = (...numbers) => {
return numbers.reduce((prev, current) => prev + current);
}
console.log(Sum(1, 2, 3, 4, 5, 6, 7, 8, 9)); // 45
其他回答
... 3个点代表JS中的展开运算符。
没有展开运算符。
let a = ['one','one','two','two'];
let unq = [new Set(a)];
console.log(a);
console.log(unq);
输出:
(4) ['one', 'one', 'two', 'two']
[Set(2)]
带有展开运算符。
let a = ['one','one','two','two'];
let unq = [...new Set(a)];
console.log(a);
console.log(unq);
输出:
(4) ['one', 'one', 'two', 'two']
(2) ['one', 'two']
<Modal {...{ title: "modal heading", animation: false, ...props} />
更加清晰。
这三个点(…)被称为展开运算符,这在概念上类似于ES6数组展开运算符JSX 利用这些支持并开发标准,以便在JSX中提供更清晰的语法
对象初始化器中的展开属性复制自己的枚举对象 属性从提供的对象转移到新创建的对象。 设n = {x, y,…z}; n;// {x: 1, y: 2, a: 3, b: 4}
引用:
传播特性 JSX深入
那三个点…不是React术语。这些是JavaScript ES6扩展操作符。这有助于在不影响原始数组的情况下创建一个新数组来执行深度复制。这也可以用于对象。
const arr1 = [1, 2, 3, 4, 5]
const arr2 = arr1 // [1, 2, 3, 4, 5]
/*
This is an example of a shallow copy.
Where the value of arr1 is copied to arr2
But now if you apply any method to
arr2 will affect the arr1 also.
*/
/*
This is an example of a deep copy.
Here the values of arr1 get copied but they
both are disconnected. Meaning if you
apply any method to arr3 it will not
affect the arr1.
*/
const arr3 = [...arr1] // [1, 2, 3, 4, 5]
在ECMAScript 6 (ES6)中引入的展开运算符(三重运算符)。ECMAScript (ES6)是JavaScript的包装器。
props中的展开运算符可枚举属性。
这一点。道具= { 名字:“丹”, 姓:“阿布拉莫夫”, 城市:纽约, :“美国” } <模态{…这个。props} title='Modal heading' animation={false}>
{……。props} = {firstName: 'Dan', 姓:“阿布拉莫夫”, 城市:纽约, 国家:“美国”}
但是主特征展开运算符用于引用类型。
例如,
let person= {
name: 'Alex',
age: 35
}
person1 = person;
person1.name = "Raheel";
console.log( person.name); // Output: Raheel
这称为引用类型。一个对象影响其他对象,因为它们在内存中是可共享的。如果你正在获得一个值,独立意味着扩展内存,两者都使用扩展操作符。
let person= {
name: 'Alex',
age: 35
}
person2 = {...person};
person2.name = "Shahzad";
console.log(person.name); // Output: Alex