logo标签列表

简单的React组件不接受箭头函数

javascriptreactjs
3

我正在尝试在React中创建我的第一个组件，但一直出现错误。这导致网站上没有显示按钮元素。以下是我的文件：

ERROR in ./src/js/components/presentational/Button1.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: Unexpected token (3:13)

  1 | import React, { Component } from "react";
  2 | class Button1 extends React.Component {
> 3 |   handleClick = () => {
    |               ^
  4 |       console.log("dupa");
  5 |   };
  6 |   render() {

./src/js/components/presentational/Button1.js

import React, { Component } from "react";
class Button1 extends React.Component {
    handleClick = () => {
        console.log("dupa");
    };
    render() {
        return (
        <button onclick={this.props.handleClick}>
            Button
        </button>
        );
    }
}
export default Button1;

./src/js/components/container/FormContainer.js

import React, { Component } from "react";
import ReactDOM from "react-dom";
import Button1 from "../presentational/Button1";
class FormContainer extends Component {
  render() {
    return (
        <Button1 />
    );
  }
}
export default FormContainer;
const wrapper = document.getElementById("create-article-form");
wrapper ? ReactDOM.render(<FormContainer />, wrapper) : false;

./src/index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" >
    <title>How to set up React, Webpack, and Babel</title>
</head>
<body>
    <div class="container">
        <div class="row mt-5">
            <div class="col-md-4 offset-md-1">
                <p>Create a new article</p>
                <div id="create-article-form">
                    <!-- form -->
                </div>
            </div>
        </div>
    </div>
</body>
</html>

编辑

我本以为我在使用 Babel。我需要进行额外的转译步骤吗？目前我只使用了：

npm start

这是我的package.json文件：
{
  "name": "front-app",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "webpack-dev-server --open --mode development",
    "build": "webpack --mode production",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.5",
    "babel-preset-env": "^1.7.0",
    "babel-preset-latest": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "html-loader": "^0.5.5",
    "html-webpack-plugin": "^3.2.0",
    "prop-types": "^15.6.2",
    "react": "^16.4.2",
    "react-dom": "^16.4.2",
    "webpack": "^4.16.5",
    "webpack-cli": "^3.1.0",
    "webpack-dev-server": "^3.1.5"
  }
}

这是我的 .babelrc 文件。

{
  "presets": [
    "react",
    "env"
  ]
}

编辑2： 问题已解决。如此所述，这是因为箭头函数目前未包含在标准中。我不得不运行 sudo npm install --save-dev babel-plugin-transform-class-properties 并编辑我的 .babelrc 文件：

{
  "presets": [
    "react",
    "env"
  ],
  "plugins": [
    ["transform-class-properties", { "spec": true }]
  ]
}
你是否包含了 Babel 预设？ - Nenad Vracar
你必须使用http://babeljs.io，因为这不是有效的Javascript。 - Jonas Wilms
你还需要 stage-2 预设，同时你会发现 https://babeljs.io/docs/en/babel-preset-latest.html 已经被弃用了。 - Nenad Vracar
接受一个答案来标记问题已解决，请勿编辑标题。 - tadman
除了之前提到的缺少 stage-2 之外，你为什么不将这个方法定义为类（原型）方法呢？在这个主题上，你可以在这里找到更多信息：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Classes#Prototype_methods - therufa
将 stage-2 添加到 .babelrc 中没有起作用。 - asdfgh
2个回答
6
您之所以出现错误，是因为 类属性（class Example { myProperty = 'foobar' }）目前还不是该语言的一部分。
您需要添加Babel插件或预设才能使其正常工作。您可以使用stage 2预设。 .babelrc 
{
  "presets": [
    "react",
    "env"
    "stage-2"
  ]
}
1
这是当前的提案，位于流程的第3阶段。 - T.J. Crowder
1
您也可以执行以下操作：

handleClick() {
   // code here
}
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接