什么是…在这个React(使用JSX)代码中做什么,它被称为什么?
<Modal {...this.props} title='Modal heading' animation={false}>
什么是…在这个React(使用JSX)代码中做什么,它被称为什么?
<Modal {...this.props} title='Modal heading' animation={false}>
当前回答
这是ES6的一个特性,在React中也使用了这个特性。请看下面的例子:
function Sum(x, y, z) {
return x + y + z;
}
console.log(Sum(1, 2, 3)); // 6
如果我们最多有三个参数,这种方式很好。但是,如果我们需要添加,例如,110个参数。我们是否应该定义它们并逐个添加它们?
当然,有一种更简单的方法,叫做扩散。 而不是传递所有这些参数,你写:
function (...numbers){}
我们不知道有多少参数,但我们知道有很多。
基于ES6,我们可以重写上面的函数如下所示,并使用它们之间的扩展和映射,使其变得简单如一块蛋糕:
let Sum = (...numbers) => {
return numbers.reduce((prev, current) => prev + current);
}
console.log(Sum(1, 2, 3, 4, 5, 6, 7, 8, 9)); // 45
其他回答
这三个点(…)被称为展开运算符,这在概念上类似于ES6数组展开运算符JSX 利用这些支持并开发标准,以便在JSX中提供更清晰的语法
对象初始化器中的展开属性复制自己的枚举对象 属性从提供的对象转移到新创建的对象。 设n = {x, y,…z}; n;// {x: 1, y: 2, a: 3, b: 4}
引用:
传播特性 JSX深入
三个点代表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(…参数){ }
在React应用程序中传递道具是常见的做法。这样我们就可以将状态更改应用到子组件上,而不管它是纯的还是不纯的(无状态的还是有状态的)。在传递道具时,有时最好的方法是传递单个属性或整个属性对象。由于ES6中对数组的支持,我们得到了“…”符号,现在我们能够实现将整个对象传递给子对象。
将道具传递给子对象的典型过程如下所示:
var component = <Component foo={x} bar={y} />;
当道具数量很少时可以使用这种方法,但当道具数量过多时就无法管理了。当您不知道子组件中所需的属性,而典型的JavaScript方法是简单地设置这些属性并稍后绑定到对象时,此方法就会出现问题。这会导致propType检查和神秘堆栈跟踪错误的问题,这些问题没有帮助,并导致调试延迟。下面是这种做法的一个例子,以及不应该做的事情:
var component = <Component />;
component.props.foo = x; // bad
component.props.bar = y;
这样做可以达到同样的结果,但会取得更适当的成功:
var props = {};
props.foo = x;
props.bar = y;
var component = Component(props); // Where did my JSX go?
但不使用JSX spread或JSX,所以要将其循环回方程中,我们现在可以这样做:
var props = {};
props.foo = x;
props.bar = y;
var component = <Component {...props} />;
包含在“…props"是foo: x, bar: y.这可以与其他属性结合起来覆盖"…使用这种语法:
var props = { foo: 'default' };
var component = <Component {...props} foo={'override'} />;
console.log(component.props.foo); // 'override'
此外,我们还可以将其他属性对象复制到其他对象上,或者按以下方式组合它们:
var oldObj = { foo: 'hello', bar: 'world' };
var newObj = { ...oldObj, foo: 'hi' };
console.log(newObj.foo); // 'hi';
console.log(newObj.bar); // 'world';
或者像这样合并两个不同的对象(这还没有在所有react版本中使用):
var ab = { ...a, ...b }; // merge(a, b)
根据Facebook的react/docs网站,另一种解释是:
如果您已经将“props”作为对象,并且希望在JSX中传递它,则可以使用“…”作为SPREAD操作符来传递整个props对象。下面两个例子是等价的:
function App1() {
return <Greeting firstName="Ben" lastName="Hector" />;
}
function App2() {
const props = {firstName: 'Ben', lastName: 'Hector'};
return <Greeting {...props} />;
}
在构建泛型容器时,扩展属性可能很有用。然而,它们也会使代码变得混乱,因为很容易将许多不相关的道具传递给不关心它们的组件。应该谨慎使用此语法。
JavaScript中的三个点是展开/休息操作符。
传播算子
扩展语法允许在需要多个参数的地方展开表达式。
myFunction(...iterableObj);
[...iterableObj, 4, 5, 6]
[...Array(10)]
其他参数
rest形参语法用于参数数量可变的函数。
function(a, b, ...theArgs) {
// ...
}
数组的展开/休息操作符是在ES6中引入的。有一个关于对象扩展/休息属性的状态2提案。
TypeScript还支持扩展语法,并可以将其转换为较旧版本的ECMAScript,但存在一些小问题。
这就是属性展开符号。它是在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%重要; }