web-dev-qa-db-ja.com

ES6でReactのクラス変数

この質問はどこかで答えられたかもしれませんが、重複とマークする前に、私を助けてください。私は、reactとd3を使用した次のcodepenを参照しています： https://codepen.io/swizec/pen/oYNvpQ

ただし、キーワードなしでクラス内で宣言された変数でこのコードペンがどのように機能するかを理解することはできません：

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
    }
};
javascriptreactjsobjectd3.jsecmascript-6
5
Omkar

しかし、どうしてコードペンが機能するのでしょうか。

それは その構文 をサポートするトランスパイラー（その場合、 Babel ）を使用しているためですReact code）で使用されるトランスパイラーでサポートされています。

JSペインのヘッダーで「JS」の横に「（Babel）」と表示されているため、Babelでトランスコンパイルされていることがわかります。

enter image description here

...そしてその隣の歯車アイコンをクリックすると、「プリプロセッサ」として選択されたバベルが表示されます。

この特定のケースでは、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準拠のコードに変えるかもしれません）。

13
T.J. Crowder