什么是…在这个React(使用JSX)代码中做什么,它被称为什么?
<Modal {...this.props} title='Modal heading' animation={false}>
什么是…在这个React(使用JSX)代码中做什么,它被称为什么?
<Modal {...this.props} title='Modal heading' animation={false}>
当前回答
在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
其他回答
传播算子!由于大多数人已经优雅地回答了这个问题,我想建议一个快速使用扩散操作符的方法列表:
…spread运算符对JavaScript中许多不同的常规任务都很有用,包括:
复制数组 连接或组合数组 使用数学函数 使用数组作为参数 向列表中添加项 在React中添加状态 结合对象 将NodeList转换为数组
查看文章了解更多细节。如何使用展开运算符。我建议你习惯它。有很多很酷的方法可以使用展开运算符。
... 被称为扩展属性,顾名思义,它允许表达式展开。
var parts = ['two', 'three'];
var numbers = ['one', ...parts, 'four', 'five']; // ["one", "two", "three", "four", "five"]
在这种情况下(我要化简它)
// Just assume we have an object like this:
var person= {
name: 'Alex',
age: 35
}
这样的:
<Modal {...person} title='Modal heading' animation={false} />
等于
<Modal name={person.name} age={person.age} title='Modal heading' animation={false} />
简而言之,我们可以说这是一条简洁的捷径。
Spread操作符允许您将可迭代对象(如对象、字符串或数组)展开为其元素,而Rest操作符则相反,将一组元素缩减为一个数组。
<Modal {...{ title: "modal heading", animation: false, ...props} />
更加清晰。
三个点代表ES6中的展开运算符。它允许我们在JavaScript中做很多事情:
连接数组 var shooterGames =['使命召唤','孤岛惊魂','生化危机']; var racingGames =['极品飞车',' gt赛车','Burnout']; Var游戏=[…]shooterGames……玩赛车); console.log(games) //['使命召唤','孤岛惊魂','生化危机','极品飞车',' gt赛车','Burnout'] 析构数组 var shooterGames =['使命召唤','孤岛惊魂','生化危机']; Var[首先,…剩余]= shooterGames; console.log(第一);//使命召唤 console.log(剩余的);//[《孤岛惊魂》、《生化危机》] 组合两个对象 var myCrush = { 名字:“萨琳娜”, middlename:“玛丽” }; Var lastname = '我的姓'; var myWife = { ……myCrush, 姓 } console.log (myWife);// {firstname: 'Selena', // midlename: 'Marie', // lastname: '我的姓'}
这三个点还有另一个用途,就是所谓的Rest参数,它可以将一个函数的所有参数作为一个数组。
作为数组的函数参数 函数fun1(…参数){ }