什么是…在这个React(使用JSX)代码中做什么,它被称为什么?
<Modal {...this.props} title='Modal heading' animation={false}>
什么是…在这个React(使用JSX)代码中做什么,它被称为什么?
<Modal {...this.props} title='Modal heading' animation={false}>
当前回答
这些被称为价差。顾名思义,它的意思是把它的值放到那些数组或对象中。
如:
let a = [1, 2, 3];
let b = [...a, 4, 5, 6];
console.log(b);
> [1, 2, 3, 4, 5, 6]
其他回答
它被称为JavaScript中的扩展语法。
它在JavaScript中用于解构数组或对象。
例子:
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)
你可以用JavaScript中的Object.assign()函数得到相同的结果。
参考:扩展语法
... 被称为扩展属性,顾名思义,它允许表达式展开。
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} />
简而言之,我们可以说这是一条简洁的捷径。
这三个点(…)被称为展开运算符,这在概念上类似于ES6数组展开运算符JSX 利用这些支持并开发标准,以便在JSX中提供更清晰的语法
对象初始化器中的展开属性复制自己的枚举对象 属性从提供的对象转移到新创建的对象。 设n = {x, y,…z}; n;// {x: 1, y: 2, a: 3, b: 4}
引用:
传播特性 JSX深入
Spread操作符允许您将可迭代对象(如对象、字符串或数组)展开为其元素,而Rest操作符则相反,将一组元素缩减为一个数组。
扩展语法允许像数组和对象这样的数据结构进行解构 它们可以从中提取一个值,也可以为它们添加一个值。 如 Const obj={name:"ram",age:10 从上面的例子中,我们可以说我们解构了obj并从该对象中提取了name。 同样的, const newObj ={……obj,地址:“尼泊尔”} 从这个例子中,我们向该对象添加了一个新属性。 在数组的情况下也是类似的。