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

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

它被称为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()函数得到相同的结果。

参考:扩展语法

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

传播算子!由于大多数人已经优雅地回答了这个问题，我想建议一个快速使用扩散操作符的方法列表:

…spread运算符对JavaScript中许多不同的常规任务都很有用，包括:

复制数组 连接或组合数组 使用数学函数 使用数组作为参数 向列表中添加项 在React中添加状态 结合对象 将NodeList转换为数组

查看文章了解更多细节。如何使用展开运算符。我建议你习惯它。有很多很酷的方法可以使用展开运算符。

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

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

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

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

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

哪个和这个相似

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

但要干净得多。