Reactjs 如何在express js中使用静态变量？

抛出一个错误：

const React = require('react');

class ProductsToolbar extends React.Component {
  static storagePrefix = 'prefix_';
}

但是静态函数工作得很好

webpack.config.js：

ERROR in ./app/components/ProductsToolbar.jsx
Module build failed (from ./node_modules/jsx-loader/index.js):
Error: Parse Error: Line 4: Unexpected identifier
    at throwError (/Volumes/Projects/node-express/abc-category/node_modules/esprima-fb/esprima.js:2818:21)

---

static

关键字在您的情况下应该有效，我认为您的错误告诉您它不理解

class

或

static

关键字

您的

webpack.config.js

缺少babel和es6类，您可能需要添加带有

@babel/plugin转换类

和

@babel/plugin建议类属性的babel加载程序

---

对于传输

.jsx

来说，将

babel loader

与

@babel/preset react

preset一起使用是一种很好的做法。

似乎

jsx loader

会传输它，但他们可能忘记了静态变量吗？由于函数很好，这个问题很奇怪，因为你的静态关键字无论如何都应该可以正常工作，实际问题可能在网页包加载器本身，建议添加

babel

，以防将来出现这些错误。这个

@babel/preset react

有一个特定的巴贝尔transpiler，我用

jsx加载程序来代替巴贝尔，但它看起来非常旧，而且是从一个（奇怪的，旧的）样板项目复制的
const path = require('path');

module.exports = {
  mode: 'production',
  context: path.join(__dirname, './'),
  entry: './app/app.jsx',
  output: {
    path: path.join(__dirname, 'public'),
    filename: 'bundle.js',
  },
  resolve: {
    extensions: ['.js', '.jsx'],
  },
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        loader: 'jsx-loader',
        include: path.join(__dirname, 'app'),
      },
      {
        test: /\.css$/i,
        use: ['style-loader', 'css-loader'],
      },
    ],
  },
};