如何正确解构？答案

【问题标题】：How to correctly destructure?如何正确解构？
【发布时间】：2020-05-07 22:50:21
【问题描述】：

我在 IE11 中使用 @material-ui/core 在 bundle.js 的以下行中遇到语法错误：

const withStyles = (stylesOrCreator, options = {}) => Component => { const {
withTheme = false,
flip = null,
name } = options

箭头函数在安装 @material-ui 之前工作这是我的 .babelrc：

{"presets": ["react", "env", "stage-2"],
 "plugins": ["transform-async-to-generator", 
"transform-es2015-arrow-functions" ,"transform-object-rest-spread", "transform-async-functions", ["transform-runtime", {
"polyfill": true,
"regenerator": true
 }]]
}

反应 v16.3.2

【问题讨论】：

标签： reactjs material-ui internet-explorer-11

【解决方案1】：

您似乎正在使用Destructuring assignment，请尝试使用插件ES2015 destructuring transform 来帮助解决此问题：

{
 "presets": ["react", "env", "stage-2"],
 "plugins": [
   "transform-async-to-generator", 
   "transform-es2015-arrow-functions",
   "transform-object-rest-spread",
   "transform-async-functions",
   "transform-es2015-destructuring" // added
   [
     "transform-runtime", 
     {
       "polyfill": true,
       "regenerator": true
     }
   ]
 ]
}

希望对您有所帮助！

【讨论】：

【解决方案2】：

我在 IE11 上测试时也遇到了这个问题。我不想在 Material UI 的代码上使用 Babel，因为他们在内部处理它。根据https://material-ui.com/getting-started/supported-platforms：

Material-UI 支持所有主流浏览器和平台的最新稳定版本。我们还支持 Internet Explorer 11。您无需提供任何 JavaScript polyfill，因为我们在内部单独管理不受支持的浏览器功能。

后来我发现我们有一些不正确的导入并更正了它们：

import Typography from '@material-ui/core/es/Typography/Typography' // incorrect
import Typography from '@material-ui/core/Typography' // correct

es 模块的直接导入破坏了 MUI 的内部兼容性处理。

【讨论】：