[英]Class variables in React with ES6
這個問題可能已在其他地方得到解答,但在標記為重復之前,請幫助我。 我指的是使用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
}
};
但是,為什么代碼筆正在工作?
因為它使用支持該語法的轉換器(在這種情況下, 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的代碼,具體取決於轉換設置)。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.