React中的这三个点做了什么？ [英] What do these three dots in React do?

问题描述

这个React（使用JSX）代码中的 ... 做了什么？它叫什么？

 < Modal {... this.props} title ='模态标题'animation = {false}> 
  

解决方案

那是属性传播符号 。它是在ES2018中添加的，但是通过转换在React项目中得到了长期支持（即使你可以在其他地方也使用JSX传播属性，而不仅仅是属性）。

{... this.props} 展开 道具中的自有属性作为您正在创建的 Modal 元素的离散属性。例如，如果 this.props 包含 a：1 和 b：2 ，然后

 < Modal {... this.props} title ='模态标题'animation = {假}> 
  

与

<$ p $相同p> <模态a = {this.props.a} b = {this.props.b} title ='模态标题'动画= {假}>


但它是动态的，所以道具中的自有属性。





由于孩子是道具，传播将包括它。因此，如果出现的组件具有子元素，则它们将被传递给模态。将子元素放在开始标记和结束标记之间只是语法糖 —善良的 —在开始标记中放置 children 属性。示例：

  class示例扩展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 =secondchildren = {< span> Child在第二个< / 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表示法不仅适用于该用例，还适用于创建具有现有对象的大部分（或全部）属性的新对象 —当你更新状态时会出现很多，因为你无法直接修改状态：

  this.setState（prevState => {
 return {foo：{... prevState.foo，a：updated}}; 
}）; 
  

用替换 this.state.foo 一个与 foo 具有相同属性的新对象，但 a 属性除外，该属性变为已更新：

  const obj = {foo：{a：1，b：2，c：3}}; console.log（original，obj.foo）; //创建一个NEW对象并将其分配给`obj.foo`obj .foo = {... obj.foo，a：updated}; console.log（updated，obj.foo）;  

  .as-console-wrapper {max-height：100％！important;}  

What does the ... do in this React (using JSX) code and what is it called?

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

解决方案

That's property spread notation. It was added in ES2018, but long-supported in React projects via transpilation (as "JSX spread attributes" even though you could do it elsewhere, too, not just attributes).

{...this.props} spreads out the "own" properties in props as discrete properties on the Modal element you're creating. For instance, if this.props contained a: 1 and b: 2, then

<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.

Since children is an "own" property in props, spread will include it. So if the component where this appears had child elements, they'll be passed on to 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. 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":

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

这篇关于React中的这三个点做了什么？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！