reactjs - React JSX defaultProps语法错误

Question

我尝试使用此代码:

import React, { Component } from 'react';

export default class Hello extends Component {
    static defaultProps = {
        somename: "World!"
    }
    render() {
        return (
            <h1>Hello {this.props.somename}</h1>
        );
    }
}

但是我然后我尝试在webpack中构建它，在这里我得到语法错误:

静态defaultProps = {

我以前没有使用过jsx和后来的ECMAScript标准。有人可以向我解释如何正确编写它。

UPD:
我的webpack配置:

const webpack = require('webpack');
const path = require('path');
const entryPath = path.resolve(__dirname, 'src/client/js');

module.exports = {
  mode: 'development',
  entry: {
    app: entryPath + '/app.js',
    main: entryPath + '/main.js',
  },
  output: {
    path: path.resolve(__dirname, 'public/js'),
    filename: '[name].js',
  },
  module: {
        rules: [
            {
                test: /\.jsx?$/, 
                exclude: /(node_modules)/,  
                loader: "babel-loader", 
                options: {
                    presets: ["env", "react"] 
                }
            }
        ]
    }
};

Answer 1

如果您不想玩.babelrc文件，可以这样重写代码:

import React, { Component } from 'react';

class Hello extends Component {
    render() {
        return (
            <h1>Hello {this.props.somename}</h1>
        );
    }
}

Hello.defaultProps = {
    somename: "World!"
}

export default Hello

如果这不是一个选择，并且您希望使用静态类属性，那么您将要使用Babel插件。我使用 babel-plugin-transform-class-properties。有一个 great tutorial on the Babel website that shows you how to implement this.

在本教程中，安装是通过以下方式完成的:
npm install --save-dev babel-plugin-transform-class-properties
然后将以下代码添加到您的 .babelrc中:

{
  "plugins": ["transform-class-properties"]
}