reactjs - reactjs 中的 material-ui - react 应用程序中的 @withStyles(styles) 给出语法错误：Unexpected token > @withStyles(styles)

Question

我是 React 的新手。

这个特定的项目包括material-ui，它在codesandbox中运行良好。

https://codesandbox.io/s/yv43ky8xox

但是当我在本地运行它时，它在下一行给出错误。

意外标记 > @withStyles(styles)

从我对问题根源的搜索来看，我认为问题在于我的 .babelrc 配置。

Failed to compile.

./src/App.js
Syntax error: Unexpected token (43:0)

  41 | })
  42 | 
> 43 | @withStyles(styles)
```

在本地，我尝试过两者都运行该项目

A）下载上面的代码和框项目并从（https://codesandbox.io/s/yv43ky8xox）安装确切的包，还有

B) 在本地机器上更新一些包（如最新版本的 React 和材料 material-ui/core）并包括额外的文件，如 .babelrc

这是上面选项 B) 的更新设置，用于在我的本地计算机上运行项目

包.json

{
  "name": "new",
  "version": "1.0.0",
  "description": "",
  "keywords": [],
  "main": "src/index.js",
  "dependencies": {
    "@material-ui/core": "^1.4.1",
    "@material-ui/icons": "^1.1.0",
    "babel-cli": "^6.26.0",
    "babel-eslint": "^8.2.6",
    "babel-plugin-transform-runtime": "^6.23.0",
    "babel-polyfill": "^6.26.0",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-stage-0": "^6.24.1",
    "css-loader": "^1.0.0",
    "material-ui": "^1.0.0-beta.47",
    "postcss-loader": "^2.1.6",
    "react": "16.3.2",
    "react-dom": "16.3.2",
    "react-scripts": "1.1.4",
    "sass-loader": "^7.0.3",
    "style-loader": "^0.21.0",
    "webpack": "^3.0.0"
  },
  "devDependencies": {
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.5",
    "babel-preset-env": "^1.7.0",
    "babel-preset-react": "^6.24.1"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  }
}

.babelrc

{
    "presets": [
      [
        "env",
        {
          "targets": {
            "node": 6
          },
          "useBuiltIns": true
        }
      ],
      "es2015",
      "stage-0",
      "react"
    ],
    "plugins": [
      "add-module-exports",
      ["direct-import", ["@material-ui/core", "@material-ui/icons"]]
    ],
    "env": {
      "production": {
        "presets": [
          "react-optimize"
        ],
        "plugins": [
          "babel-plugin-dev-expression"
        ]
      },
      "development": {
        "plugins": [
          "transform-class-properties",
          "transform-es2015-classes",
          "react-hot-loader/babel"
        ]
      }
    }
  }

在本地机器中，.src/App.js 中的代码与我在代码和框中的代码一样

（https://codesandbox.io/s/yv43ky8xox）

在 Google-Chrome 中运行此应用 |

标签： reactjsmaterial-ui

Answer 1

您是否尝试像这样导出它

export default withStyles(styles)(App)

而不是使用@withStyle？