laravel 中的 React 正在获取语法错误意外标记

Question

我意识到这个问题已经被问了很多，但我找不到答案。任何帮助将不胜感激，谢谢！

根据 laracasts 中关于在 Laravel 中做出反应的 post Jeffrey Way 说：只要做：

mix.react('src', 'output');

我们将安装所有必要的 Babel 插件并设置您的 .babelrc。

在我的项目中，我目前有一个组件，在我的反应混合文件中，我有这个：

mix.react('resources/assets/js/basicapp.js', 'public/js');

我的 basicapp.js 文件是一个简单的组件设置，如下所示：

require('./components/Reactapp');

当我运行混合时，它会产生一个错误：模块构建失败：SyntaxError：意外标记 (43:17)

  41 |   }
  42 | 
> 43 |   toggleSelected = (id, key) => {
     |                  ^
  44 |     let temp = [...this.state[key]]
  45 |     temp[id].selected = !temp[id].selected
  46 |     this.setState({

这两天我一直在绞尽脑汁！任何帮助将不胜感激。

编辑：根据 Jeffrey Way 的说明检查没有 .babelrc 文件后，这应该由 laravel 自动完成。

Answer 1

我会把它留作评论，但我没有足够的分数来发表评论。但是如果你不使用es6语法，它会起作用吗？

toggleSelected(id, key){}

Answer 2

经过进一步审查 Laravel 不仅仅适用于 es6。我必须添加一个 .babelrc 文件，然后向 package.json

添加一些依赖项

我将其添加到 package.json devDependencies:

"babel-cli": "^6.26.0",
"babel-eslint": "^8.2.6",
"babel-polyfill": "^6.26.0",
"babel-preset-env": "^1.7.0",
"babel-preset-stage-0": "^6.24.1",

这已经存在了：

"babel-preset-react": "^6.24.1",

在 .babelrc 文件中我添加了这个：

{
    "presets": [
        "react",
        "stage-0",
        [
            "env",
            {
                "targets": {
                    "browsers": [
                        "last 2 versions",
                        "safari >= 7"
                    ]
                }
            }
        ]
    ],
    "plugins": [
        [
            "babel-plugin-transform-class-properties"
        ]
    ]
}

Answer 3

toggleSelected = (id, key) => {
......
}

您正在为您的事件处理程序使用所谓的 class fields/properties 语法。此语法是一项实验性功能，只有在您提供以下内容时才能使用： @babel/plugin-proposal-class-properties
参见 proposal class properties

您需要使用此命令安装插件：

npm install --save-dev @babel/plugin-proposal-class-properties

laravel 中的 React 正在获取语法错误意外标记

React in laravel is getting syntaxerror unexpected token

reactjs

laravel-mix