解构（扩展运算符）在React JSX中有效，但不在外面吗？

Question

我在Component构造函数中有这段代码：

this.state = {
    captcha: {...ABC.XYZ}
};

我尝试了不同的变体，比如

const abc = ABC.XYZ;
const dummy = {...abc};

我总是得到错误。

Unexpected token (36:18) Use --force to continue

但是，在我的JSX中，我有

<Login
    {...props}
/>

这很好用。

如果它是Babel问题，那么它不应该在任何地方出错吗？

Answer 1

this.state = {
  captcha: {...ABC.XYZ}
}

绝对等于

this.state = {
  captcha: ABC.XYZ
}

所以解构分配在这里毫无意义

Answer 2

一个有效，一个无效，因为它们是两个独立的功能。

<Login
  {...props}
/>

是JSX spread attribute而

this.state = {
  captcha: {...ABC.XYZ}
};

是ES2018 object spread。

由于第一个是JSX的一个特性，它在处理JSX时由Babel转换。对于第二个，您需要在Babel中明确启用https://babeljs.io/docs/plugins/transform-object-rest-spread/。