React with ES6 中的类变量

Posted 2023-02-22

【中文标题】React with ES6 中的类变量

【英文标题】：Class variables in React with ES6

【发布时间】：2018-07-07 11:19:07

【问题描述】：

此问题可能已在其他地方得到解答，但在标记为重复之前，请帮助我解决此问题。我指的是使用 react 和 d3 的以下 codepen：https://codepen.io/swizec/pen/oYNvpQ

但是，我无法弄清楚这个 codepen 如何在没有任何关键字的情况下处理在类中声明的变量：

class Colors extends Component 
 colors = d3.schemeCategory20;
  width = d3.scaleBand()
            .domain(d3.range(20));

   ....

当我尝试执行此代码时，我收到以下错误：

./app/components/D3IndentedTree/Chloreophath.js
Module build failed: SyntaxError: Unexpected token (13:11)

  11 | // Draws an entire color scale
  12 | class Colors extends Component 
> 13 |     colors = d3.schemeCategory20;
     |            ^
  14 |     width = d3.scaleBand()
  15 |         .domain(d3.range(20));
  16 | 

我无法弄清楚为什么会出现此错误。我知道您不能直接在类中声明类的变量/属性。但是代码笔是怎么起作用的呢？

提前致谢！

更新：添加 webpack.config.js 文件：

    var path = require('path');
var webpack = require('webpack');
var htmlWebpackPlugin = require('html-webpack-plugin');

module.exports = 
    entry: './app/index.js',
    output: 
        path: path.resolve(__dirname, 'dist'),
        filename: 'index_bundle.js',
        publicPath: '/'
    ,
    module: 
        rules: [
             test: /\.(js)$/, use: 'babel-loader' ,
             test: /\.css$/, use: [ 'style-loader', 'css-loader'] ,
            
                test: /\.png$/,
               loader: "url-loader?limit=100000"
             ,
             
               test: /\.jpg$/,
               loader: "file-loader"
             ,
             
              test: /\.(woff|woff2)(\?v=\d+\.\d+\.\d+)?$/,
               loader: 'url-loader? limit=10000&mimetype=application/font-woff'
              ,
              
               test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
               loader: 'url-loader?limit=10000&mimetype=application/octet-stream'
              ,
              
               test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
               loader: 'file-loader'
               ,
               
               test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
               loader: 'url-loader?limit=10000&mimetype=image/svg+xml'
              
        ]
    ,
    plugins: [new HtmlWebpackPlugin(
        template: 'app/index.html'
    ),
    new webpack.ProvidePlugin(
        "React": "react",
      ),],
    devServer: 
        historyApiFallback: true
    
;

【参考方案1】：

但是代码笔是怎么工作的呢？

因为它使用了支持 that syntax 的转译器（在这种情况下为 Babel）（目前是第 3 阶段提案，[尚未] 指定的功能，但与 React 代码一起使用的转译器通常支持） .

您可以看到它正在使用 Babel 进行转译，因为它在 JS 窗格的标题中的“JS”旁边显示“(Babel)”：

...如果你点击它旁边的齿轮图标，你会看到 Babel 被选为“预处理器”。

在这种特殊情况下，Babel 采用以下方式：

class Colors extends Component 
  colors = d3.schemeCategory20;
  width = d3.scaleBand()
            .domain(d3.range(20));

   // ....

...让它好像是这样写的：

class Colors extends Component 
  constructor() 
    this.colors = d3.schemeCategory20;
    this.width = d3.scaleBand()
                   .domain(d3.range(20));
  
  // ....

...（然后很可能会将其转换为符合 ES5 的代码，具体取决于转译设置）。

【讨论】：

非常感谢@T.J.Crowder 的回答和快速响应。我会尽快考虑集成 babel。

Crowder，但是，我尝试添加 babel-loader。事实上它已经有了。似乎仍然没有编译。重新编辑问题

@Omkar：请注意，您需要 correct plugin。 Babel 是基础设施，插件完成实际工作。

@T.J.Crowser，感谢您提供的信息。另外，你是对的。我错过了将语法转换为 es5 的 stage-0 插件。添加该预设有效。再次感谢。

@Omkar：不用担心。我强烈建议不要使用 stage-0 插件。我不会依赖至少不是第 3 阶段的任何东西，即使是第 3 阶段，我也会挑选。