reactjs：导入余量后出错

Question

我是 react 新手，在我的 react 应用程序中，我正在尝试使用“React Headroom”，但在导入后我得到了这个 SyntaxError“当前未启用对实验语法 'classProperties' 的支持（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>
  );
}

导出默认应用程序；

Answer 1

将评论转换为答案

通常你不会从src目录导入。
尝试从'react-headroom'导入。

Answer 2

您需要使用syntax-class-properties插件。 使用安装它

yarn add babel-plugin-syntax-class-properties

然后将其添加到您的.babelrc ：

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

Answer 3

只要确保你在你的 .babelrc 文件中使用了正确的插件

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