这个问题可能已经在其他地方得到了回答,但在标记为重复之前,请帮助我解决这个问题。我指的是使用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
}
};
最佳答案
But how come then the code pen is working?
因为它使用支持 Babel 的转译器(在这种情况下为 that syntax ) (目前这是第 3 阶段提案,尚未成为指定功能,但通常受到与 React 代码一起使用的转译器的支持)。
您可以看到它正在使用 Babel 进行转译,因为它在 JS Pane 标题中的“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 兼容的代码,具体取决于转译设置)。
关于javascript - React 中的类变量与 ES6,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48489792/