javascript - 如何解决未进一步指定的 eslient token 错误?
问题描述
我正在尝试执行一个简单的功能。但是 eslient 告诉我,我有一个Parsing error: Unexpected token
.
export class SomeComponent extends Component {
function foo () { console.log ("hello") return }
render() {
return (
<React.Fragment>
</React.Fragment>
);
}
}
我在其他帖子中看到问题可能出在我的包配置中。这就是为什么我还在这里提供配置:
{
"name": "test-project",
"version": "0.1.0",
"private": true,
"dependencies": {
"@babel/runtime": "7.0.0-beta.55",
"@fortawesome/fontawesome-free": "^5.13.0",
"@material-ui/core": "^4.10.2",
"@material-ui/icons": "^4.9.1",
"@testing-library/jest-dom": "^4.2.4",
"@testing-library/react": "^9.4.0",
"@testing-library/user-event": "^7.2.1",
"@types/jest": "^24.9.1",
"@types/node": "^12.12.28",
"@types/react": "^16.9.21",
"@types/react-dom": "^16.9.5",
"@types/react-router-dom": "^5.1.3",
"axios": "^0.19.2",
"bootstrap": "^4.4.1",
"classnames": "^2.2.6",
"d3-ease": "^1.0.6",
"html-react-parser": "^0.10.3",
"html-to-react": "^1.4.2",
"i": "^0.3.6",
"install": "^0.13.0",
"jquery": "^3.4.1",
"material-kit-react": "^1.8.0",
"mdbreact": "^4.25.5",
"npm": "^6.14.6",
"prop-types": "^15.7.2",
"pure-react-carousel": "^1.26.1",
"react": "^16.12.0",
"react-alert": "^6.0.1",
"react-alert-template-basic": "^1.0.0",
"react-audio-player": "^0.11.1",
"react-bootstrap": "^1.0.0-beta.17",
"react-bootstrap-carousel": "^4.0.3",
"react-card-carousel": "^1.1.3",
"react-dom": "^16.12.0",
"react-geocode": "^0.2.1",
"react-google-autocomplete": "^1.1.2",
"react-google-maps": "^9.4.5",
"react-h5-audio-player": "^2.4.2",
"react-image-appear": "^1.2.23",
"react-loader-spinner": "^3.1.14",
"react-loading-image": "^0.5.0",
"react-redux": "^7.2.0",
"react-redux-loading-bar": "^5.0.0",
"react-reveal": "^1.2.2",
"react-router": "^5.1.2",
"react-router-dom": "^5.1.2",
"react-scripts": "3.4.0",
"react-scroll": "^1.7.9",
"react-select": "^3.1.0",
"react-slick": "^0.23.1",
"react-split-pane": "^2.0.3",
"react-transition-group": "^4.3.0",
"react-user-profile": "^1.0.3",
"redux": "^4.0.5",
"redux-devtools-extension": "^2.13.8",
"redux-thunk": "^2.3.0",
"slick-carousel": "^1.8.1",
"styled-components": "^5.0.1",
"typescript": "^3.7.5"
},
"scripts": {
"start": "react-app-rewired start",
"build": "react-app-rewired build",
"test": "react-app-rewired test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"@babel/plugin-proposal-decorators": "^7.10.3",
"babel-eslint": "^10.1.0",
"customize-cra": "^1.0.0",
"react-app-rewired": "^2.1.6"
}
}
我按照下面的帖子安装了 babel eslient via yarn add -D babel-eslint
。然而,后来 react 给我一个错误,我安装了一个不兼容的 babel eslient 版本,我不得不重新安装所有包。
解决方案
您是否尝试使用类或功能组件,您的代码中有一些错误。
类组件应如下所示:
class ClassComponent extends React.Component {
constructor(props) {
super(props)
// state here
}
printMessage = (msg) => {
console.log(msg);
};
render() {
this.printMessage("Hello World");
return <div>jsx here</div>;
}
}
功能组件应如下所示:
function FunctionalComponent(props) {
const printMessage = (msg) => {
console.log(msg);
};
printMessage()
return <div>jsx here</div>;
}
推荐阅读
- html - div 由于边框而在悬停时扩大其大小
- java - 定义多个 DataSource 时的循环依赖
- firebase - 是否可以格式化从 Firebase sendSignInLinkToEmail 发送的电子邮件?
- python - statsmodel 中线性回归常数的左侧 p 值
- python-3.x - 使用字符串进行操作:Python 中任何分隔符后的每个单词都大写
- angular - 将 webpack 的 `require.context` 与 angular cli 和 ivy 一起使用
- c# - 刚体游戏对象在移动时被限制移动
- c - 为什么使用 n=sizeof(myarray)/sizeof(myarray[0]) 会给出“注释”错误,但为 n 指定数值不会?
- reference - 在 STM32CubeIDE(基于 Eclipse 的 IDE)中添加新的源文件和头文件不能无缝工作
- objective-c - 如何在 Swift 中使用 Objective-C 可视化工具