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

．.． (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"]

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

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

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

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

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

在React应用程序中传递道具是常见的做法。这样我们就可以将状态更改应用到子组件上，而不管它是纯的还是不纯的(无状态的还是有状态的)。在传递道具时，有时最好的方法是传递单个属性或整个属性对象。由于ES6中对数组的支持，我们得到了“…”符号，现在我们能够实现将整个对象传递给子对象。

将道具传递给子对象的典型过程如下所示:

var component = <Component foo={x} bar={y} />;

当道具数量很少时可以使用这种方法，但当道具数量过多时就无法管理了。当您不知道子组件中所需的属性，而典型的JavaScript方法是简单地设置这些属性并稍后绑定到对象时，此方法就会出现问题。这会导致propType检查和神秘堆栈跟踪错误的问题，这些问题没有帮助，并导致调试延迟。下面是这种做法的一个例子，以及不应该做的事情:

var component = <Component />;
component.props.foo = x; // bad
component.props.bar = y;

这样做可以达到同样的结果，但会取得更适当的成功:

var props = {};
props.foo = x;
props.bar = y;
var component = Component(props); // Where did my JSX go?

但不使用JSX spread或JSX，所以要将其循环回方程中，我们现在可以这样做:

var props = {};
props.foo = x;
props.bar = y;
var component = <Component {...props} />;

包含在“…props"是foo: x, bar: y.这可以与其他属性结合起来覆盖"…使用这种语法:

var props = { foo: 'default' };
var component = <Component {...props} foo={'override'} />;
console.log(component.props.foo); // 'override'

此外，我们还可以将其他属性对象复制到其他对象上，或者按以下方式组合它们:

var oldObj = { foo: 'hello', bar: 'world' };
var newObj = { ...oldObj, foo: 'hi' };
console.log(newObj.foo); // 'hi';
console.log(newObj.bar); // 'world';

或者像这样合并两个不同的对象(这还没有在所有react版本中使用):

var ab = { ...a, ...b }; // merge(a, b)

根据Facebook的react/docs网站，另一种解释是:

如果您已经将“props”作为对象，并且希望在JSX中传递它，则可以使用“…”作为SPREAD操作符来传递整个props对象。下面两个例子是等价的:

function App1() {
  return <Greeting firstName="Ben" lastName="Hector" />;
}



function App2() {
  const props = {firstName: 'Ben', lastName: 'Hector'};
  return <Greeting {...props} />;
}

在构建泛型容器时，扩展属性可能很有用。然而，它们也会使代码变得混乱，因为很容易将许多不相关的道具传递给不关心它们的组件。应该谨慎使用此语法。

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