什么是…在这个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
其他回答
扩展语法允许像数组和对象这样的数据结构进行解构 它们可以从中提取一个值,也可以为它们添加一个值。 如 Const obj={name:"ram",age:10 从上面的例子中,我们可以说我们解构了obj并从该对象中提取了name。 同样的, const newObj ={……obj,地址:“尼泊尔”} 从这个例子中,我们向该对象添加了一个新属性。 在数组的情况下也是类似的。
对于那些想要简单快速理解这个问题的人:
首先,这不仅仅是React的语法。这是ES6中的扩展语法,它迭代(合并,添加等)数组和对象。点击这里阅读更多信息。
为了回答这个问题:
让我们想象你有这样的标签:
<UserTag name="Supun" age="66" gender="male" />
然后你这样做:
const user = {
"name": "Joe",
"age": "50"
"test": "test-val"
};
<UserTag name="Supun" gender="male" {...user} age="66" />
那么标签将等于这个:
<UserTag name="Joe" gender="male" test="test-val" age="66" />
因此,当你在React标签中使用spread语法时,它将标签的属性作为对象属性,与给定的对象用户合并(如果存在则替换)。此外,您可能已经注意到,它只替换属性之前,而不是属性之后。所以在这个例子中,年龄保持不变。
... (JavaScript中的三个点)被称为扩展语法或扩展操作符。这允许一个可迭代对象(如数组表达式或字符串)被展开,或一个对象表达式被展开。这不是React特有的。它是一个JavaScript操作符。
这里所有的答案都是有用的,但我想列出最常用的传播语法(传播操作符)的实际用例。
1. 组合数组(串联数组)
组合数组的方法有很多种,但展开操作符允许您将其放置在数组中的任何位置。如果你想组合两个数组,并将元素放置在数组中的任何位置,你可以这样做:
var arr1 = ['two', 'three'];
var arr2 = ['one', ...arr1, 'four', 'five'];
// arr2 = ["one", "two", "three", "four", "five"]
2. 复制数组
当我们想要一个数组的副本时,我们使用array .prototype.slice()方法。但是,你也可以用展开运算符做同样的事情。
var arr = [1,2,3];
var arr2 = [...arr];
// arr2 = [1,2,3]
3.调用没有应用的函数
在ES5中,要将两个数字的数组传递给doStuff()函数,你经常使用function .prototype.apply()方法,如下所示:
function doStuff (x, y, z) {}
var args = [0, 1, 2];
// Call the function, passing args
doStuff.apply(null, args);
但是,通过使用展开操作符,可以将数组传递给函数。
doStuff(...args);
4. 解构数组
你可以使用解构和rest操作符一起将信息提取到你想要的变量中:
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. 函数参数作为Rest参数
ES6还有三个点(…),它表示一个rest形参,将函数的所有剩余参数收集到一个数组中。
function f(a, b, ...args) {
console.log(args);
}
f(1, 2, 3, 4, 5); // [3, 4, 5]
6. 使用数学函数
任何将spread用作实参的函数都可以被接受任意数量实参的函数使用。
let numbers = [9, 4, 7, 1];
Math.min(...numbers); // 1
7. 两个对象合并
您可以使用展开运算符来合并两个对象。这是一种简单明了的方法。
var carType = {
model: 'Toyota',
yom: '1995'
};
var carFuel = 'Petrol';
var carData = {
...carType,
carFuel
}
console.log(carData);
// {
// model: 'Toyota',
// yom: '1995',
// carFuel = 'Petrol'
// }
8. 将字符串分离为单独的字符
您可以使用展开运算符将字符串展开为单独的字符。
let chars = ['A', ...'BC', 'D'];
console.log(chars); // ["A", "B", "C", "D"]
您可以想到更多使用扩展操作符的方法。我在这里列出的是它的流行用例。
这是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']