什么是…在这个React(使用JSX)代码中做什么,它被称为什么?
<Modal {...this.props} title='Modal heading' animation={false}>
什么是…在这个React(使用JSX)代码中做什么,它被称为什么?
<Modal {...this.props} title='Modal heading' animation={false}>
当前回答
它被称为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()函数得到相同的结果。
参考:扩展语法
其他回答
…(展开运算符)用于React to:
提供一种简洁的方式将道具从父组件传递给子组件。例如,给定父组件中的这些道具,
this.props = {
username: "danM",
email: "dan@mail.com"
}
它们可以通过以下方式传递给孩子,
<ChildComponent {...this.props} />
哪个和这个相似
<ChildComponent username={this.props.username} email={this.props.email} />
但要干净得多。
... 被称为扩展属性,顾名思义,它允许表达式展开。
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} />
简而言之,我们可以说这是一条简洁的捷径。
<Modal {...{ title: "modal heading", animation: false, ...props} />
更加清晰。
它被称为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()函数得到相同的结果。
参考:扩展语法
这些被称为价差。顾名思义,它的意思是把它的值放到那些数组或对象中。
如:
let a = [1, 2, 3];
let b = [...a, 4, 5, 6];
console.log(b);
> [1, 2, 3, 4, 5, 6]