Javascript 反应组件模块'；classProperties'；isn'；t当前已启用

执行我的react模块时出错

“classProperties”当前未启用（44:11）：

将@babel/插件提案类属性（）添加到 Babel配置的“插件”部分启用转换

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

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;

import React，{Component}来自'React'；
从“axios”导入axios；
类MyFetch扩展了组件{
建造师（道具）{
超级（道具）；
此.state={
数据：[]，
开始时间：''，
响应时间：“”
}
}
组件willmount（）{
.....
}
//componentDidUpdate或尝试此选项
onClick=（e）=>{
e、 预防默认值（）；
常量url=`${this.props.url}`；
if（this.props.method==“GET”）{
get（url）。然后（res=>{
这是我的国家({
数据：res.data
})
console.log（this.state.data）
})
}
else if（this.props.method==“POST”）{
get（url）。然后（res=>{
这是我的国家({
数据：res.data
})
console.log（this.state.data）
})
}
}
render（）{
返回(
{this.props.url(
获取响应时间
):(
无效的
)}
{this.state.responseTime(
{this.state.responseTime}
):(
无效的
)}
);
}
}
导出默认MyFetch；

对于初学者，开始使用React的最佳方法是使用

创建React应用程序

创建一个现成的样板文件。查看文档，不要浪费时间配置东西，而是专注于为应用程序编写代码

---

对于初学者，开始使用React的最佳方法是使用

创建React应用程序

创建一个现成的样板文件。查看文档，不要浪费时间配置东西，而是专注于为应用程序编写代码

---

通过添加

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'
  },
};

---

通过添加

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'
  },
};

---

这并不能提供解决方案。抱歉。此外，

.babelrc

的问题是由

create react app

引起的，因为它们不支持外部Babel配置文件。这不提供解决方案。抱歉。此外，

.babelrc

的问题是由

create react app

引起的，因为它们不支持外部Babel配置文件。