React中解构（扩展运算符）在JSX中可用，外部使用为何报错？

Great question! Let's break down exactly what's going on here—those two uses of the ... operator are different syntax features that Babel handles separately, which is why one works flawlessly and the other throws that Unexpected token error.

Here's the key distinction: #

• JSX attribute spread (<Login {...props} />): This is a React-specific JSX extension, not native JavaScript. The @babel/preset-react (which you almost certainly have set up for React projects) includes built-in support for this syntax, so Babel knows how to compile it into valid JS under the hood. That's why this part works without issues.

• Object spread in constructor ({...ABC.XYZ}): This is the ES2018 Object Spread Operator, a native JavaScript feature. Unlike the JSX spread, Babel doesn't enable this by default unless you explicitly include the right plugin or preset. If your Babel config doesn't have support for this syntax, it'll choke on the ... when parsing plain JavaScript code (like your constructor logic).

How to fix the constructor error: #

You need to make sure Babel is set up to handle object rest/spread syntax. Here's how:

1. Install the required plugin (if you haven't already):

   npm install --save-dev @babel/plugin-proposal-object-rest-spread
   

2. Update your Babel config (e.g., .babelrc or babel.config.js) to include the plugin:

   {
     "presets": ["@babel/preset-react", "@babel/preset-env"],
     "plugins": ["@babel/plugin-proposal-object-rest-spread"]
   }
   

   Alternatively, if you're using @babel/preset-env, you can configure it to target environments that don't support object spread natively—this will automatically include the plugin for you. For example:

   {
     "presets": [
       "@babel/preset-react",
       ["@babel/preset-env", {
         "targets": {
           "browsers": ["last 2 versions", "ie >= 11"]
         },
         "useBuiltIns": "usage",
         "corejs": 3
       }]
     ]
   }
   

Why this isn't a "global" Babel error: #

Babel processes code in chunks and only throws errors for syntax it doesn't recognize in the context it's parsing. Since your JSX spread is handled by the React preset, that code compiles fine. The object spread in your constructor is plain JS that Babel doesn't know how to parse, so it only throws an error at that specific line—nothing else breaks because the rest of your code uses syntax Babel understands.

内容的提问来源于stack exchange，提问作者oshkosh