Метод класса реакции не определен no-undef

Question

Я новичок в реакции. Мое приложение работало правильно, но после добавления eslint(airbnb) мои приложения не скомпилировались.

export default class HelloWorldComponent extends React.Component {
  render() {
    return (
      <div>
        <div>{this.props.message}</div>
        <button onClick={this.props.helloWorldClick}>Hello 
        World</button>
      </div>
    )
  }
  helloWorldClick = () => {
    console.log('here') 
  }
}

Перед добавлением { "parser": "babel-eslint" } в файл.eslintrc выдает ошибку eslint

"[eslint] Ошибка разбора: неожиданный токен =" - в строке функции стрелки helloWorldClick.

После добавления парсера у меня нет ошибки elsint. Но получил скомпилированную ошибку для запуска приложения.

Не удалось скомпилировать./src/component/HelloWorldComponent.js Строка 18: "helloWorldClick" не определен no-undef

Пожалуйста, дайте мне знать, как я могу решить эту ошибку.

Answer 1

Это не функция стрелки, которая вызывает проблему здесь. Свойства класса не являются частью спецификации ES6.

Если вы хотите иметь возможность трансформировать этот код, вам нужно добавить плагин babel свойств класса.

В качестве альтернативы, это преобразование предоставляется как часть предустановки Babel's stage 2.

Использование функции стрелки со свойством класса гарантирует, что метод всегда вызывается с компонентом в качестве значения для этого, что означает, что ручная привязка здесь избыточна.

this.helloWorldClick = this.helloWorldClick.bind (this);

Answer 2

Я столкнулся с этой проблемой, а также. Вы можете добавить следующее в верхнюю часть каждого файла компонента, чтобы предотвратить появление сообщения об ошибке клавиш un-def и по-прежнему использовать функции стрелок без изменения настроек es-lint.

/* eslint no-undef: 0 */ // --> OFF

Answer 3

Спасибо за Ваш ответ. Но моя проблема была в другом. Наконец я решил это. Снизить версию eslint до 3.19.0. Это прекрасно работает сейчас.