什么是…在这个React(使用JSX)代码中做什么,它被称为什么?

<Modal {...this.props} title='Modal heading' animation={false}>

当前回答

Spread操作符允许您将可迭代对象(如对象、字符串或数组)展开为其元素,而Rest操作符则相反,将一组元素缩减为一个数组。

其他回答

它被称为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()函数得到相同的结果。

参考:扩展语法

这就是属性展开符号。它是在ES2018年添加的(扩展数组/可迭代对象是更早的ES2015年),但它在React项目中已经通过编译(作为“JSX扩展属性”,尽管你也可以在其他地方做,而不仅仅是属性)得到了很长时间的支持。

{……。props}将props中的“自己的”可枚举属性展开为您正在创建的Modal元素上的离散属性。例如,如果这个。道具包含a: 1和b: 2

<Modal {...this.props} title='Modal heading' animation={false}>

会和

<Modal a={this.props.a} b={this.props.b} title='Modal heading' animation={false}>

但它是动态的,所以道具中任何“自己的”属性都包括在内。

由于儿童是道具中“自己”的属性,传播将包括它。如果这个出现的组件有子元素,它们会被传递给Modal。在开始标记和结束标记之间放置子元素只是语法上的“糖”——好的那种——用于在开始标记中放置子属性。例子:

实例扩展React。组件{ 呈现(){ const {className, children} = this.props; 回报( < div className = {className} > {孩子} < / div > ); } } ReactDOM.render ( [ > <例子className =“第一” <span>第一个子元素</span> < / >示例, <示例className="second" children={<span> second中的子</span>} /> ), . getelementbyid(“根”) ); 当代{ 颜色:绿色; } 接着{ 颜色:蓝色; } < div id = "根" > < / div > < script src = " https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js " > < /脚本> < script src = " https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js " > < /脚本>

扩展表示法不仅在这个用例中很方便,而且在创建一个具有现有对象的大部分(或全部)属性的新对象时也很方便——当你更新状态时经常会出现这种情况,因为你不能直接修改状态:

this.setState(prevState => {
    return {foo: {...prevState.foo, a: "updated"}};
});

这将this.state.foo替换为一个新对象,该对象具有与foo相同的所有属性,除了a属性,它变成了“updated”:

Const obj = { foo: { 答:1, b: 2 c: 3 } }; console.log(“原始”,obj.foo); //创建一个新对象并将其赋值给' obj.foo ' obj。Foo ={…Foo, a: "updated"}; obj.foo console.log(“更新”); .as-console-wrapper { Max-height: 100%重要; }

扩展语法允许像数组和对象这样的数据结构进行解构 它们可以从中提取一个值,也可以为它们添加一个值。 如 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中的三个点是展开/休息操作符。

传播算子

扩展语法允许在需要多个参数的地方展开表达式。

myFunction(...iterableObj);

[...iterableObj, 4, 5, 6]

[...Array(10)]

其他参数

rest形参语法用于参数数量可变的函数。

function(a, b, ...theArgs) {
  // ...
}

数组的展开/休息操作符是在ES6中引入的。有一个关于对象扩展/休息属性的状态2提案。

TypeScript还支持扩展语法,并可以将其转换为较旧版本的ECMAScript,但存在一些小问题。