如何解决未进一步指定的 eslient token 错误？

Question

我正在尝试执行一个简单的功能。但是 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"
  }
}

我遵循了以下post 并通过yarn add -D babel-eslint 安装了babel eslient。但是，之后 react 给我的错误是我安装了不兼容的 babel eslient 版本，我不得不重新安装所有软件包。

Answer 1

您是否尝试使用类或功能组件，您的代码中有一些错误。

类组件应如下所示：

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>;
}