Простой Webpack 4 + Babel 7 + Реагирует ClickHandler в синтаксисе ES6 - PullRequest
Новая
       16

Простой Webpack 4 + Babel 7 + Реагирует ClickHandler в синтаксисе ES6

0 голосов
/ 07 мая 2019

Я просто настраиваюсь с очень простым React + Webpack 4 + Babel 7, следуя этому замечательному руководству здесь - https://www.robinwieruch.de/minimal-react-webpack-babel-setup/

У меня все работает на моем локальном хосте, и я создал свой первый нестандартный компонент 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>
    )
  }
}

Теперь мой локальный хост падает с пустой страницей, но я думаю, что мой код правильный?

Полагаю, я использовал функцию стрелки ES6, хотя я думал, что babel это сделал, и конвертировал ее, если нужно ... поэтому я также попробовал синтаксис ES5, но все равно падает с пустым экраном

Такое ощущение, что я упустил некоторое понимание того, что на самом деле здесь происходит - я не могу думать, где бы я начал отлаживать это

1 Ответ

1 голос
/ 08 мая 2019

Возможно, вы не настроили 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>
    )
  }

}

Надеюсь, это поможет.

...