javascript - React 中的这三个点在做什么？

Question

... 在这个 React(使用 JSX)代码中做了什么？它叫什么？

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

Answer 1

那是 property spread notation .它是在 ES2018 中添加的(数组/可迭代的传播更早，ES2015)，但它通过编译在 React 项目中得到了很长时间的支持(如“JSX spread attributes”，即使你也可以在其他地方做，不仅仅是属性)。

{...this.props} 散布 props 中的“自己的”可枚举属性作为 上的离散属性您正在创建的模态 元素。例如，如果 this.props 包含 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}>

但它是动态的，因此 props 中的任何“自己”属性都包括在内。

由于 children 是 props 中的“自己的”属性，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>

扩展表示法不仅适用于该用例，而且适用于创建具有现有对象的大部分(或全部)属性的新对象 - 当您更新状态时会经常出现这种情况，因为您可以t 直接修改状态:

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