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

在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

这三个点(…)被称为展开运算符，这在概念上类似于ES6数组展开运算符JSX 利用这些支持并开发标准，以便在JSX中提供更清晰的语法

对象初始化器中的展开属性复制自己的枚举对象 属性从提供的对象转移到新创建的对象。 设n = {x, y，…z}; n;// {x: 1, y: 2, a: 3, b: 4}

引用:

传播特性 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} />

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

它被称为JavaScript中的扩展语法。

它在JavaScript中用于解构数组或对象。

例子:

const objA = { a: 1, b: 2, c: 3 }
const objB = { ...objA, d: 1 }
/* Result of objB will be { a: 1, b: 2, c: 3, d: 1 } */
console.log(objB)

const objC = { ....objA, a: 3 }
/* result of objC will be { a: 3, b: 2, c: 3, d: 1 } */
console.log(objC)

你可以用JavaScript中的Object.assign()函数得到相同的结果。

参考:扩展语法

．.． 3个点代表JS中的展开运算符。

没有展开运算符。

let a = ['one','one','two','two'];
let unq = [new Set(a)];

console.log(a);
console.log(unq);

输出:

(4) ['one', 'one', 'two', 'two']
[Set(2)]

带有展开运算符。

let a = ['one','one','two','two'];
let unq = [...new Set(a)];

console.log(a);
console.log(unq);

输出:

(4) ['one', 'one', 'two', 'two']
(2) ['one', 'two']