不能在 ReactJs + Electron 中使用箭头函数：意外的令牌

Question

我曾经在React Native项目中使用Javascript中的箭头函数，一切都很好。

现在，我正在使用Electron开发ReactJS应用程序，但我不能执行任何箭头功能。

这里有一个例子：

export default class App extends React.Component {

constructor(props) {
super(props);
this.state = {nodes : [],
path: 'C:/Users/',
}   
};
...    
updatePath(event) {  
this.setState({path: event.target.value});
this.displayPath(); 
}
handleNodeClick = (item) => { 
if (item.type == "folder")
{
this.updatePath(item.path + '/');   
}
};
...
render() {
return {...}};

这给了我一个第一个等号的错误：

Uncaught SyntaxError: C:/Users/Alexy/Documents/PROJETS/SOFTLABEL/labelsoft/src/app.jsx: Unexpected token (90:18)
88 |   
89 |   
> 90 |   handleNodeClick = (item) => { 
|                   ^
91 | 
92 |  console.log(item);
93 |  if (item.type == "folder")

我安装了babel与：

npm install --save-dev babel-plugin-transform-class-properties

但事实上，我不明白babel在这里做什么，箭头函数不是JS原生的？当我在React Native上工作时，我从未做过任何特别的事情，一切都像一种魅力，我真的很迷失在这里。

这是我的包.json:

{
"name": "labelsoft",
"productName": "labelsoft",
"version": "1.0.0",
"description": "My Electron application description",
"main": "src/index.js",
"scripts": {
"start": "electron-forge start",
"package": "electron-forge package",
"make": "electron-forge make",
"publish": "electron-forge publish",
"lint": "eslint --cache --color --ext .jsx,.js src"
},
"keywords": [],
"author": "Alexy",
"license": "MIT",
"config": {
"forge": {
"make_targets": {
"win32": [
"squirrel"
],
"darwin": [
"zip"
],
"linux": [
"deb",
"rpm"
]
},
"electronPackagerConfig": {
"packageManager": "npm"
},
"electronWinstallerConfig": {
"name": "labelsoft"
},
"electronInstallerDebian": {},
"electronInstallerRedhat": {},
"github_repository": {
"owner": "",
"name": ""
},
"windowsStoreConfig": {
"packageName": "",
"name": "labelsoft"
}
}
},
"dependencies": {
"@blueprintjs/core": "^3.31.0",
"electron-compile": "^6.4.4",
"electron-devtools-installer": "^2.2.4",
"electron-squirrel-startup": "^1.0.0",
"fs": "0.0.1-security",
"path": "^0.12.7",
"react": "^15.6.2",
"react-dom": "^15.6.2",
"react-hot-loader": "^3.1.3",
"shell": "^0.5.0"
},
"devDependencies": {
"babel-plugin-transform-async-to-generator": "^6.24.1",
"babel-plugin-transform-class-properties": "^6.24.1",
"babel-plugin-transform-es2015-classes": "^6.24.1",
"babel-preset-env": "^1.7.0",
"babel-preset-react": "^6.24.1",
"electron-forge": "^5.2.4",
"electron-prebuilt-compile": "8.2.0",
"eslint": "^3.19.0",
"eslint-config-airbnb": "^15.1.0",
"eslint-plugin-import": "^2.22.0",
"eslint-plugin-jsx-a11y": "^5.1.1",
"eslint-plugin-react": "^7.20.6"
}
}

有什么安装方法可以使箭头功能正常工作吗？关于如何使用它，到处都有很多信息，但没有关于如何使用的信息。

Answer 1

很确定您在关闭｛｝时遇到了问题

这是一个工作演示与一些类似你的代码：

https://codesandbox.io/s/react-counters-w-arrow-functions-forked-c7h9c

你的代码和这个代码有什么区别吗？查看并评论。

Answer 2

我认为它应该看起来像：

handleNodeClick(item) {...}

整个示例：

export default class App extends React.Component {

constructor(props) {
super(props);
this.state = {nodes : [],
path: 'C:/Users/',
}   
};
...    
handleNodeClick(item) { 
if (item.type == "folder")
{
this.updatePath(item.path + '/');   
}
};
...
render() {
return {...}};