这是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的一个特性，在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

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

如:

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

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

更加清晰。

它只是在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中提供更清晰的语法。

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

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

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