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

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

当前回答

扩展语法允许像数组和对象这样的数据结构进行解构 它们可以从中提取一个值,也可以为它们添加一个值。 如 Const obj={name:"ram",age:10 从上面的例子中,我们可以说我们解构了obj并从该对象中提取了name。 同样的, const newObj ={……obj,地址:“尼泊尔”} 从这个例子中,我们向该对象添加了一个新属性。 在数组的情况下也是类似的。

其他回答

这些被称为价差。顾名思义,它的意思是把它的值放到那些数组或对象中。

如:

let a = [1, 2, 3];
let b = [...a, 4, 5, 6];
console.log(b);
> [1, 2, 3, 4, 5, 6]

三个点代表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} />

简而言之,我们可以说这是一条简洁的捷径。

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

…(展开运算符)用于React to:

提供一种简洁的方式将道具从父组件传递给子组件。例如,给定父组件中的这些道具,

this.props = {
  username: "danM",
  email: "dan@mail.com"
}

它们可以通过以下方式传递给孩子,

<ChildComponent {...this.props} />

哪个和这个相似

<ChildComponent username={this.props.username} email={this.props.email} />

但要干净得多。