javascript - React中的这三个点是做什么的？(What do these three dots in React do?)

Question

...在此React（使用JSX）代码中做什么？它叫什么？

<Modal {...this.props} title='Modal heading' animation={false}>

  ask by Thomas Johansen translate from so

Answer 1

That's property spread notation .

(那是财产传播符号 。)

It was added in ES2018 (spread for arrays/iterables was earlier, ES2015), but it's been supported in React projects for along time via transpilation (as " JSX spread attributes " even though you could do it elsewhere, too, not just attributes).

(它是在ES2018中添加的（用于数组/可迭代对象的版本更早于ES2015），但是随着时间的流逝，它已经通过转译得到了支持（即使您也可以在其他地方（不仅是属性）也可以通过“ JSX传播属性 ”来支持它） 。)

{...this.props} spreads out the "own" enumerable properties in props as discrete properties on the Modal element you're creating.

({...this.props} 将 props的“自己的”可枚举属性散布为要创建的Modal元素上的离散属性。)

For instance, if this.props contained a: 1 and b: 2 , then

(例如，如果this.props包含a: 1和b: 2 ，则)

<Modal {...this.props} title='Modal heading' animation={false}>

would be the same as

(将与)

<Modal a={this.props.a} b={this.props.b} title='Modal heading' animation={false}>

But it's dynamic, so whatever "own" properties are in props are included.

(但是它是动态的，因此包含了props中任何“自己的”属性。)

Since children is an "own" property in props , spread will include it.

(由于children是props的“自有”财产，因此传播将包括它。)

So if the component where this appears had child elements, they'll be passed on to Modal .

(因此，如果出现此组件的组件具有子元素，则将它们传递给Modal 。)

Putting child elements between the opening tag and closing tags is just syntactic sugar — the good kind — for putting a children property in the opening tag.

(在开始标签和结束标签之间放置子元素只是语法上的糖（一种很好的选择），用于在开始标签中放置children属性。)

Example:

(例：)

 class Example extends React.Component { render() { const { className, children } = this.props; return ( <div className={className}> {children} </div> ); } } ReactDOM.render( [ <Example className="first"> <span>Child in first</span> </Example>, <Example className="second" children={<span>Child in second</span>} /> ], document.getElementById("root") ); 

 .first { color: green; } .second { color: blue; } 

 <div id="root"></div> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script> 

Spread notation is handy not only for that use case, but for creating a new object with most (or all) of the properties of an existing object — which comes up a lot when you're updating state, since you can't modify state directly:

(扩展符号不仅适用于该用例，而且对于创建具有现有对象的大多数（或全部）属性的新对象非常方便-在更新状态时会遇到很多问题，因为您无法修改状态直：)

this.setState(prevState => {
    return {foo: {...prevState.foo, a: "updated"}};
});

That replaces this.state.foo with a new object with all the same properties as foo except the a property, which becomes "updated" :

(this.state.foo替换为一个新对象，该对象具有与foo相同的所有属性，但a属性变为"updated" ：)

 const obj = { foo: { a: 1, b: 2, c: 3 } }; console.log("original", obj.foo); // Creates a NEW object and assigns it to `obj.foo` obj.foo = {...obj.foo, a: "updated"}; console.log("updated", obj.foo); 

 .as-console-wrapper { max-height: 100% !important; }