<Modal {...{ title: "modal heading", animation: false, ...props} />

更加清晰。

．.． (JavaScript中的三个点)被称为扩展语法或扩展操作符。这允许一个可迭代对象(如数组表达式或字符串)被展开，或一个对象表达式被展开。这不是React特有的。它是一个JavaScript操作符。

这里所有的答案都是有用的，但我想列出最常用的传播语法(传播操作符)的实际用例。

1. 组合数组(串联数组)

组合数组的方法有很多种，但展开操作符允许您将其放置在数组中的任何位置。如果你想组合两个数组，并将元素放置在数组中的任何位置，你可以这样做:

var arr1 = ['two', 'three'];
var arr2 = ['one', ...arr1, 'four', 'five'];

// arr2 = ["one", "two", "three", "four", "five"]

2. 复制数组

当我们想要一个数组的副本时，我们使用array .prototype.slice()方法。但是，你也可以用展开运算符做同样的事情。

var arr = [1,2,3];
var arr2 = [...arr];
// arr2 = [1,2,3]

3.调用没有应用的函数

在ES5中，要将两个数字的数组传递给doStuff()函数，你经常使用function .prototype.apply()方法，如下所示:

function doStuff (x, y, z) {}
var args = [0, 1, 2];

// Call the function, passing args
doStuff.apply(null, args);

但是，通过使用展开操作符，可以将数组传递给函数。

doStuff(...args);

4. 解构数组

你可以使用解构和rest操作符一起将信息提取到你想要的变量中:

let { x, y, ...z } = { x: 1, y: 2, a: 3, b: 4 };
console.log(x); // 1
console.log(y); // 2
console.log(z); // { a: 3, b: 4 }

5. 函数参数作为Rest参数

ES6还有三个点(…)，它表示一个rest形参，将函数的所有剩余参数收集到一个数组中。

function f(a, b, ...args) {
  console.log(args);
}

f(1, 2, 3, 4, 5); // [3, 4, 5]

6. 使用数学函数

任何将spread用作实参的函数都可以被接受任意数量实参的函数使用。

let numbers = [9, 4, 7, 1];
Math.min(...numbers); // 1

7. 两个对象合并

您可以使用展开运算符来合并两个对象。这是一种简单明了的方法。

var carType = {
  model: 'Toyota',
  yom: '1995'
};

var carFuel = 'Petrol';

var carData = {
  ...carType,
  carFuel
}

console.log(carData);
// {
//  model: 'Toyota',
//  yom: '1995',
//  carFuel = 'Petrol'
// }

8. 将字符串分离为单独的字符

您可以使用展开运算符将字符串展开为单独的字符。

let chars = ['A', ...'BC', 'D'];
console.log(chars); // ["A", "B", "C", "D"]

您可以想到更多使用扩展操作符的方法。我在这里列出的是它的流行用例。

那三个点…不是React术语。这些是JavaScript ES6扩展操作符。这有助于在不影响原始数组的情况下创建一个新数组来执行深度复制。这也可以用于对象。

const arr1 = [1, 2, 3, 4, 5]
const arr2 = arr1 // [1, 2, 3, 4, 5]
/*
 This is an example of a shallow copy.
 Where the value of arr1 is copied to arr2
 But now if you apply any method to
 arr2 will affect the arr1 also.  
*/

/*
 This is an example of a deep copy. 
 Here the values of arr1 get copied but they 
 both are disconnected. Meaning if you
 apply any method to arr3 it will not
 affect the arr1.
 */
 const arr3 = [...arr1] // [1, 2, 3, 4, 5]

这就是属性展开符号。它是在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%重要; ｝

在ECMAScript 6 (ES6)中引入的展开运算符(三重运算符)。ECMAScript (ES6)是JavaScript的包装器。

props中的展开运算符可枚举属性。

这一点。道具= ｛ 名字:“丹”, 姓:“阿布拉莫夫”, 城市:纽约， :“美国” ｝ <模态{…这个。props} title='Modal heading' animation={false}>

{……。props} = {firstName: 'Dan'， 姓:“阿布拉莫夫”, 城市:纽约， 国家:“美国”}

但是主特征展开运算符用于引用类型。

例如,

let person= {
    name: 'Alex',
    age: 35
}
person1 = person;

person1.name = "Raheel";

console.log( person.name); // Output: Raheel

这称为引用类型。一个对象影响其他对象，因为它们在内存中是可共享的。如果你正在获得一个值，独立意味着扩展内存，两者都使用扩展操作符。

 let person= {
        name: 'Alex',
        age: 35
    }
person2 = {...person};

person2.name = "Shahzad";

console.log(person.name); // Output: Alex

．.． 被称为扩展属性，顾名思义，它允许表达式展开。

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} />

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