反应组件模块“classProperties”当前未启用

Question

执行我的反应模块时出错

'classProperties' 当前未启用 (44:11)：

 }
  43 |   // componentDidUpdate or try this
> 44 |   onClick = (e) => {
     |           ^
  45 |     e.preventDefault();
  46 |      const url = `${this.props.url}`;
  47 |      if(this.props.method === "GET"){

将@babel/plugin-proposal-class-properties (https://git.io/vb4SL) 添加到 Babel 配置的“插件”部分以启用转换。

我尝试了解决方案，重新构建后仍然出现错误。

Support for the experimental syntax 'classProperties' isn't currently enabled

package.json

{
  "name": "blahmodule",
  "version": "1.0.0",
  "description": "a fetch module for our project",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "./node_modules/.bin/babel src --out-file index.js"
  },
  "peerDependencies": {
    "react": "^16.6.6",
    "react-dom": "^16.6.3",
    "axios": "^0.19.0"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "@babel/cli": "^7.4.4",
    "@babel/core": "^7.4.5",
    "@babel/preset-env": "^7.4.5",
    "@babel/preset-react": "^7.0.0",
    "react": "^16.8.6",
    "react-dom": "^16.8.6"
  },
  "devDependencies": {
    "@babel/plugin-proposal-class-properties": "^7.4.4",
    "axios": "^0.19.0"
  }
}

.babelrc

我尝试使用 module.exports 将 .babelrc 更改为 babel.config.js，但仍然没有成功。也有和没有"loose": true

{
    "presets": [
      "@babel/preset-env",
      "@babel/preset-react"
    ],
    "plugins": [
        [
          "@babel/plugin-proposal-class-properties",
          {
            "loose": true
          }
        ]
      ]
  }

代码从头开始

import React, {Component} from 'react';
import axios from 'axios';

class MyFetch extends Component {
  constructor(props){
    super(props);
    this.state = {
      data:[],
      startTime:'',
      responseTime:''
    }

  }
  componentWillMount(){
   .....
  }
  // componentDidUpdate or try this
  onClick = (e) => {
    e.preventDefault();
     const url = `${this.props.url}`;
     if(this.props.method === "GET"){
        axios.get(url).then( res => {

          this.setState({
            data: res.data
          })
          console.log(this.state.data)
        })
     }
     else if(this.props.method === "POST"){
        axios.get(url).then( res => {
          this.setState({
            data: res.data
          })
          console.log(this.state.data)
        })
     }
  }
  render(){
    return (
      <div>
        {this.props.url ? (
         <button onClick={this.onClick}>Get Response Time</button>
          ):(
              null
          )}

       {this.state.responseTime ? (
         <h3>{this.state.responseTime}</h3>
       ):(
          null
       )}
       </div>
    );
  }
}

export default MyFetch;

Answer 1

通过添加webpack 修复它，我删除了.babelrc，因为我包含在webpack.config.js 中。现在我想我有理由在我的项目中使用 webpack。

var path = require('path');
module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, './'),
    filename: 'index.js',
    libraryTarget: 'commonjs2'
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        include: path.resolve(__dirname, 'src'),
        exclude: /(node_modules|bower_components|build)/,
        use: {
          loader: 'babel-loader',
          options: { 
            presets: ['@babel/preset-env', '@babel/react'],
            plugins:['@babel/plugin-proposal-class-properties']
          }
        }
      }
    ]
  },
  externals: {
    'react': 'commonjs react',
    'reactDOM': 'react-dom'
  },
};

Answer 2

对于初学者来说，开始使用 React 的最佳方式是使用 create-react-app 创建一个准备好去干净的样板。查看文档，不要浪费时间进行配置，而是专注于为您的应用编写代码。

https://github.com/facebook/create-react-app#npm