什么是…在这个React(使用JSX)代码中做什么,它被称为什么?
<Modal {...this.props} title='Modal heading' animation={false}>
什么是…在这个React(使用JSX)代码中做什么,它被称为什么?
<Modal {...this.props} title='Modal heading' animation={false}>
当前回答
三个点代表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(…参数){ }
其他回答
... 被称为扩展属性,顾名思义,它允许表达式展开。
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} />
简而言之,我们可以说这是一条简洁的捷径。
…(展开运算符)用于React to:
提供一种简洁的方式将道具从父组件传递给子组件。例如,给定父组件中的这些道具,
this.props = {
username: "danM",
email: "dan@mail.com"
}
它们可以通过以下方式传递给孩子,
<ChildComponent {...this.props} />
哪个和这个相似
<ChildComponent username={this.props.username} email={this.props.email} />
但要干净得多。
传播算子!由于大多数人已经优雅地回答了这个问题,我想建议一个快速使用扩散操作符的方法列表:
…spread运算符对JavaScript中许多不同的常规任务都很有用,包括:
复制数组 连接或组合数组 使用数学函数 使用数组作为参数 向列表中添加项 在React中添加状态 结合对象 将NodeList转换为数组
查看文章了解更多细节。如何使用展开运算符。我建议你习惯它。有很多很酷的方法可以使用展开运算符。
扩展语法允许像数组和对象这样的数据结构进行解构 它们可以从中提取一个值,也可以为它们添加一个值。 如 Const obj={name:"ram",age:10 从上面的例子中,我们可以说我们解构了obj并从该对象中提取了name。 同样的, const newObj ={……obj,地址:“尼泊尔”} 从这个例子中,我们向该对象添加了一个新属性。 在数组的情况下也是类似的。
它只是在JSX中以不同的方式为您定义道具!
它使用…ES6中的数组和对象操作符(对象1还不完全支持),所以基本上如果你已经定义了你的props,你可以通过这种方式将它传递给你的元素。
所以在你的例子中,代码应该是这样的:
function yourA() {
const props = {name='Alireza', age='35'};
<Modal {...props} title='Modal heading' animation={false} />
}
因此,您定义的道具现在分开了,并可以在必要时重用。
它等于:
function yourA() {
<Modal name='Alireza' age='35' title='Modal heading' animation={false} />
}
以下是React团队对JSX中扩展操作符的引用:
JSX传播属性 如果您知道要放在组件上的所有属性 提前使用JSX是很容易的:
var component = <Component foo={x} bar={y} />;
如果你不知道你想要设置哪些属性,你可能会想稍后将它们添加到对象上:
var component = <Component />;
component.props.foo = x; // bad
component.props.bar = y; // also bad
这是一个反模式,因为这意味着我们不能帮你检查 正确的propTypes直到很久以后。这意味着你的propTypes 错误将以一个神秘的堆栈跟踪结束。 这些道具应该被认为是不可变的。改变道具对象 其他地方可能会导致意想不到的后果,所以理想情况下会是这样 在这一点上是一个冻结的物体。 现在你可以使用JSX的一个新特性,叫做扩展属性:
var props = {};
props.foo = x;
props.bar = y;
var component = <Component {...props} />;
对象的属性被复制到 组件的道具。 您可以多次使用该属性,也可以将其与其他属性组合使用。 规范顺序很重要。稍后的属性覆盖 之前的。
var props = { foo: 'default' };
var component = <Component {...props} foo={'override'} />;
console.log(component.props.foo); // 'override'
奇怪的是什么…符号?…操作符(或展开操作符)在ES6中已经支持数组。也有 对象Rest和扩展属性的ECMAScript提案。我们 利用这些支持并有序地开发标准 在JSX中提供更清晰的语法。