Question

请Stackoverflow伙计们，我知道这里已经回答了这个问题，但是我无法解决它 handleChange1()显示缺少类属性的错误转换

Error: Missing class properties transform

以上来源提供的一些Stackoverflow专家建议安装

npm install babel-plugin-transform-class-properties --save-dev

和设置

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

webpack.config文件中的

。我已经做到了，但仍然无法正常工作

import React, { Component } from 'react';
import { render } from 'react-dom';
import Select from 'react-select'
import 'react-select/dist/react-select.css';

class App extends Component {
  constructor() {
    super();
    this.state = {
      name: 'React',
      selectedOption: {},

    };
  }

  handleChange1 = (dataSearch) => {
    this.setState({dataSearch});
  }

//代码继续

这是 webpack.config

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

module.exports = {
    entry: './src/index.jsx',
    output: {
        path: path.resolve('dist'),
        filename: 'bundle.js'
    },

module:{
  rules: [
    {
            test: /\.jsx?$/,
            exclude: /(node_modules|bower_components)/,
            loader: 'babel-loader',
            query: {
               presets: ['react', 'es2015', 'stage-3'],
               plugins: ["transform-class-properties"]


            }
        },
    {

      test: /\.(s?)css$/,
      use: [
            "style-loader",
            "css-loader",
            "sass-loader"
          ]
      }]
    },



    resolve: {
        extensions: ['*','.js', '.jsx', '.css', '.scss']
    },


    plugins: [new HtmlWebpackPlugin({
        template: './src/index.html',
        filename: 'index.html',
        inject: 'body'
    })],
    devServer: {
port: 4200,
        historyApiFallback: true

    },
    externals: {
        // global app config object

        config: JSON.stringify({
            apiUrl: 'http://localhost'
        })

    }
}

package.json

{
  "name": "example",
  "version": "1.0.0",
  "repository": {
    "type": "git",
    "url": ""
  },
  "license": "MIT",
  "scripts": {
    "start": "webpack-dev-server --open"
  },
  "dependencies": {
    "history": "^4.6.3",
    "node-sass": "^4.9.4",
    "react": "^16.0.0",
    "react-dom": "^16.0.0",
    "react-redux": "^5.0.5",
    "react-router-dom": "^4.1.2",
    "react-select": "^2.1.1",
    "react-toastify": "^4.4.0",
    "redux": "^3.7.2",
    "redux-logger": "^3.0.6",
    "redux-thunk": "^2.2.0"
  },
  "devDependencies": {
    "babel-core": "^6.21.0",
    "babel-loader": "^7.1.2",
    "babel-plugin-transform-class-properties": "^6.24.1",
    "babel-preset-es2015": "^6.18.0",
    "babel-preset-react": "^6.16.0",
    "babel-preset-stage-3": "^6.24.1",
    "css-loader": "^1.0.1",
    "html-webpack-plugin": "^2.26.0",
    "path": "^0.12.7",
    "sass-loader": "^7.1.0",
    "style-loader": "^0.23.1",
    "webpack": "^3.6.0",
    "webpack-dev-server": "^2.8.2"
  }
}

Answer 1

您必须放置

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

位于 .babelrc文件内部，而不位于 webpack.config 中。

它应该像这样：

.babelrc

{
  "presets": [...],
  "plugins": [
    [ "transform-class-properties" ]
  ]
}

结帐Babel docs on class properties以获得更多信息。

React-redux显示缺少错误的类属性转换

1 个答案: