reactjs：导入余量后出错

Question

I'm new in react and in my react application I'm trying to use "React Headroom" but after importing I'm getting this SyntaxError "Support for the experimental syntax 'classProperties' isn't currently enabled (10:20):"

import React from 'react';
import Headroom from 'react-headroom/src';

import './App.css';

function App() {
  return (
    <div className="App">
      <Headroom>
        <nav>
          ...
        </nav>
      </Headroom>
    </div>
  );
}

export default App;

Answer 1

Converting comment to answer

Usually you don't import from the src directory.
Try to import from just 'react-headroom' .

Answer 2

You need to use the syntax-class-properties plugin . Install it using

yarn add babel-plugin-syntax-class-properties

then add it to your .babelrc :

{
    "plugins": ["syntax-class-properties"]
}

Answer 3

Just make sure you are using correct plugins in your.babelrc file

 "babel": {
    "presets": [
      "@babel/preset-env",
      "@babel/preset-react"
    ],
    "plugins": [
      "@babel/plugin-proposal-class-properties"
    ]
  },