Question

我只是按照这里的出色指南-https://www.robinwieruch.de/minimal-react-webpack-babel-setup/

设置了一个非常简单的React + Webpack 4 + Babel 7

我已经在本地主机上运行了一些东西，并创建了我的第一个自定义“ hello world”风格的jsx组件，这太棒了！

然后我尝试创建一个非常简单的clickHandler

import React, { Component } from 'react';

export default class testComponent extends Component {

ClickHandler = () => {
  console.log("I was called")
};

render() {

  return (
    <div>
      Test component test
      <button onClick={this.ClickHandler}>Click me</button>
    </div>
    )
  }
}

这现在导致我的localhost出现空白页，但是我认为我的代码正确吗？

我的猜测是我对ES6箭头功能的使用，即使我认为babel确实做到了，并在需要时进行了转换。.所以我也尝试了ES5语法，但仍然出现空白屏幕

感觉像我对这里实际发生的事情错过了一些了解-我想不起来该在哪里调试

Answer 1

您可能尚未设置babel来处理类属性。

您可以安装以下babel插件：
https://www.npmjs.com/package/@babel/plugin-proposal-class-properties

npm install --save-dev @babel/plugin-proposal-class-properties

...，然后更新您的 .babelrc 文件以使用该插件：

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

或者，您可以更改代码以删除对类属性的使用：

import React, { Component } from 'react'

export default class testComponent extends Component {

  clickHandler() {
    console.log("I was called")
  }

  render() {
    return (
      <div>
        Test component test
        <button onClick={this.clickHandler}>Click me</button>
      </div>
    )
  }

}

我希望这会有所帮助。

ES6语法中的简单Webpack 4 + Babel 7 + React ClickHandler

1 个答案: