加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 百科 > 正文

reactjs – 无法使箭头功能起作用(React,Babel,Webpack,ES6)

发布时间:2020-12-15 16:19:22 所属栏目:百科 来源:网络整理
导读:参见英文答案 How to use arrow functions (public class fields) as class methods?????????????????????????????????????4个 绝望地希望我能找到一个可以告诉我为什么我无法使用箭头功能来处理我的Webpack / Babel设置的人,一直在尝试一堆东西,到目前为止
参见英文答案 > How to use arrow functions (public class fields) as class methods?????????????????????????????????????4个
绝望地希望我能找到一个可以告诉我为什么我无法使用箭头功能来处理我的Webpack / Babel设置的人,一直在尝试一堆东西,到目前为止还没有任何工作.项目现状:

的package.json:

{
  "name": "..","version": "1.0.0","description": "..","main": "app.jsx","author": "..","license": "ISC","devDependencies": {
    "babel-core": "^6.22.1","babel-loader": "^6.2.10","babel-plugin-transform-class-properties": "^6.22.0","babel-plugin-transform-react-jsx": "^6.22.0","babel-preset-es2015": "^6.22.0","babel-preset-react": "^6.22.0","babel-preset-stage-2": "^6.22.0","css-loader": "^0.26.1","node-sass": "^4.5.0","sass-loader": "^4.1.1","style-loader": "^0.13.1","webpack": "^2.2.1","webpack-dev-server": "^2.3.0"
  },"dependencies": {
    "lodash": "^4.17.4","react": "^15.4.2","react-dom": "^15.4.2","react-router": "^3.0.2"
  }
}

webpack.config.js:

var path = require('path');

module.exports = {
  entry: './src/router.jsx',output: {
    filename: 'bundle.js',path: path.resolve(__dirname,'public')
  },watch: true,module: {
    loaders: [
      {
         test: /.jsx$/,exclude: /(node_modules)/,loader: 'babel-loader',query: {
           presets: ['react','es2015']
         }
      },{
        test: /.scss$/,loader: 'style-loader!css-loader!sass-loader'
      },]
  }
};

.babelrc

{
  "plugins": [
    "transform-react-jsx","transform-class-properties"
  ],"presets": [
    "es2015","react","stage-2"
  ],}

零件:

import React from 'react'

import './styles.scss'

class Button extends React.Component {
  asdf = () => {
    return ['btn',this.props.size].join(' ')
  }

  render() {
    return (
      <button className={this.asdf}>
        {this.props.children}
      </button>
    )
  }
}

export default Button

错误:

ERROR in ./src/app/ui-kit/button.jsx
Module build failed: SyntaxError: Missing class properties transform.

  4 |
  5 | class Button extends React.Component {
> 6 |   asdf = () => {
    |   ^
  7 |     return ['btn',this.props.size].join(' ')
  8 |   }
  9 |

 @ ./src/app/components/signup.jsx 13:14-45
 @ ./src/app/app.jsx
 @ ./src/router.jsx

解决方法

检查我的babel包和.babelrc正在我当前的项目中工作并与你的比较:

.babelrc:

{
  "presets": ["react","es2015","stage-0"],"plugins": [
    ["transform-decorators-legacy"]
  ]      
}

packages.json

"babel-core": "^6.4.5","babel-eslint": "^6.1.2","babel-loader": "^6.2.1","babel-plugin-react-transform": "^2.0.0","babel-plugin-transform-decorators-legacy": "^1.3.4","babel-polyfill": "^6.3.14","babel-preset-es2015": "^6.3.13","babel-preset-react": "^6.3.13","babel-preset-react-hmre": "^1.0.1","babel-preset-stage-0": "^6.3.13",

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读