解构(扩展运算符)在 React JSX 中有效,但在外部无效?

贪婪

我的组件构造函数中有这段代码:

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

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

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

我总是得到错误。

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

但是,在我的 JSX 中,我有

<Login
    {...props}
/>

这工作正常。

如果是 Babel 的问题,不应该到处报错吗?

罗根迷思

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

<Login
  {...props}
/>

是一个JSX 传播属性,

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

是一个ES2018 对象 spread

由于第一个是 JSX 的一个特性,所以它在处理 JSX 时被 Babel 转化。第二,您需要在 Babel 中显式启用https://babeljs.io/docs/plugins/transform-object-rest-spread/

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

jsx中的三元运算符以包含带有react的html

带有 React 扩展运算符的数组中的 SetState

带有扩展运算符的 TypeScript React setState

react-redux 减速器中扩展运算符和没有扩展运算符之间的区别

React + .jsx + Spread运算符-添加样式?

在jsx表达式中使用扩展运算符

React JSX Transform无效

如何使用三元运算符使用 react 和 typescript 返回 jsx?

如何在React组件的jsx和typescript中使用三元运算符?

三元运算符未在React jsx中呈现标记

React / JSX中的三元运算符不起作用

使用JSX的React.js中的安全导航运算符

如何在JSX / React中使用三元运算符呈现多个组件?

这个扩展运算符是否有效使用

解构错误对象在Chrome中有效,但在Firefox中无效。该怎么办?

逻辑运算符 || 不输出所有内容(JSX)

JSX中的三元运算符内如何有两个函数调用?

为什么在React JSX中三元运算符可以工作而其他却不能

React 三元运算符返回 jsx 和字符串返回一个对象

使用 React useState 扩展运算符 // 从 Firebase 填充状态

JSX 传播运算符的使用

JSX中的混合运算符

jQuery 脚本在 HTML 中有效,但在外部文件中无效

减法运算符有效,但加法运算符无效

TypeScript / JSX类型断言仅在JSX外部有效

此代码段中的打字稿解构运算符有什么问题?

比 AND 运算符有效的查询

在React中有三元运算符的数据时传递<li>

在shell扩展中,“ @ a”运算符有什么用?