javascript - React中的这三个点做了什么?

...在这个反应(使用JSX)代码中做了什么,它叫什么?

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


最佳答案:

这就是财产价差符号。它是在ES2018中添加的,但在React项目中通过蒸腾作用长期得到支持(作为“JSX扩展属性”,即使您也可以在其他地方进行,而不仅仅是属性)。
{...this.props}props中的“own”属性作为要创建的Modal元素的离散属性展开。例如,如果this.props包含a: 1b: 2,则

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

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

但它是动态的,所以不管props中包含什么“自有”属性。
由于childrenprops中的“own”属性,因此spread将包括它。因此,如果出现的组件具有子元素,它们将被传递到Modal。在开始标记和结束标记之间放置子元素只是语法上的糖-在开始标记中放置children属性的好方法。例子:
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>

扩展符号不仅对这个用例很方便,而且对于创建一个新的对象来说,它具有现有对象的大部分(或全部)属性,这在更新状态时会出现很多,因为您不能直接修改状态:
this.setState(prevState => {
    return {foo: {...prevState.foo, a: "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;
}

评论