什么是…在这个React(使用JSX)代码中做什么,它被称为什么?
<Modal {...this.props} title='Modal heading' animation={false}>
什么是…在这个React(使用JSX)代码中做什么,它被称为什么?
<Modal {...this.props} title='Modal heading' animation={false}>
当前回答
这三个点(…)被称为展开运算符,这在概念上类似于ES6数组展开运算符JSX 利用这些支持并开发标准,以便在JSX中提供更清晰的语法
对象初始化器中的展开属性复制自己的枚举对象 属性从提供的对象转移到新创建的对象。 设n = {x, y,…z}; n;// {x: 1, y: 2, a: 3, b: 4}
引用:
传播特性 JSX深入
其他回答
JavaScript中的三个点是展开/休息操作符。
传播算子
扩展语法允许在需要多个参数的地方展开表达式。
myFunction(...iterableObj);
[...iterableObj, 4, 5, 6]
[...Array(10)]
其他参数
rest形参语法用于参数数量可变的函数。
function(a, b, ...theArgs) {
// ...
}
数组的展开/休息操作符是在ES6中引入的。有一个关于对象扩展/休息属性的状态2提案。
TypeScript还支持扩展语法,并可以将其转换为较旧版本的ECMAScript,但存在一些小问题。
<Modal {...{ title: "modal heading", animation: false, ...props} />
更加清晰。
对于那些想要简单快速理解这个问题的人:
首先,这不仅仅是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语法时,它将标签的属性作为对象属性,与给定的对象用户合并(如果存在则替换)。此外,您可能已经注意到,它只替换属性之前,而不是属性之后。所以在这个例子中,年龄保持不变。
三个点代表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(…参数){ }
Spread操作符允许您将可迭代对象(如对象、字符串或数组)展开为其元素,而Rest操作符则相反,将一组元素缩减为一个数组。