javascript - 简单的反应组件不接受箭头功能
问题描述
我正在尝试创建我的第一个反应组件,但我不断收到错误。这导致网站上根本不显示按钮元素。这是我的文件:
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"
]
}
EDIT2:问题解决了。如此处所述,这是因为箭头功能目前未包含在标准中。我必须运行sudo npm install --save-dev babel-plugin-transform-class-properties
并且必须编辑我的 .babelrc:
{
"presets": [
"react",
"env"
],
"plugins": [
["transform-class-properties", { "spec": true }]
]
}
解决方案
推荐阅读
- javascript - Next.js 增量静态重新生成不反映更改而不重新加载页面
- flutter - 例外:坏状态:未来已经完成
- azure - 视频索引器 API INVALID_INPUT - 索引预设“DefaultWithNoiseReduction”无效
- scala - Sttp Uri 避免解码
- c++ - _flow_graph_cache_impl.h 中的 tbb 流程图分段错误
- javascript - jquery阻止第二个嵌套函数首先运行
- java - Android:无法更改播放速度。媒体播放器
- css - 如何在 jss 中定位 input[type=checkbox]
- mysql - 使用 Spring MVC 为用户列表生成碧玉报告
- php - 无法启动 docker-compose