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

这就是属性传播表示法。它是在ES2018中添加的（数组/迭代对象的传播更早，ES2015），但它在React项目中通过转译得到了很长时间的支持（作为“JSX传播属性”，即使你也可以在其他地方做到这一点，而不仅仅是属性）。

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

由于 是 中的“自有”属性，因此 spread 将包括它。因此，如果出现这种情况的组件具有子元素，则它们将被传递给 。将子元素放在开始标记和结束标记之间只是语法糖 - 好的那种 - 用于将属性放在开始标记中。例：childrenpropsModalchildren

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.foofooa"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;
}

...称为展开属性，顾名思义，它允许扩展表达式。

var parts = ['two', 'three'];
var numbers = ['one', ...parts, 'four', 'five']; // ["one", "two", "three", "four", "five"]

在这种情况下（我将简化它）。

// Just assume we have an object like this:
var person= {
    name: 'Alex',
    age: 35 
}

这：

<Modal {...person} title='Modal heading' animation={false} />

等于

<Modal name={person.name} age={person.age} title='Modal heading' animation={false} />

简而言之，我们可以说，这是一个简洁的捷径。