Рубрики
Без рубрики

Eslint с классиком класса

Когда я создаю функцию, которая возвращает класс прикрепленного декоратора, Eslint вызывает ошибку. Мы можем сделать … Помечено JavaScript, React, Mobx, Eslint.

Когда я создаю функцию, которая возвращает класс прикрепленного декоратора, Eslint вызывает ошибку.

Мы можем написать такую функцию, как это:

// RequireLogin.js(error)
// @flow

import React from 'react'

@inject('userStore')
@observer
export default (ComposedComponent: *) => class RequireLogin extends React.Component {
  render() {
    if (this.props.userStore.guest) return 
LOGIN REQUIRED
else return } }

Babel-Plugin-Transform-Decorator-Legacy Может преобразовать его, как и ожидалось, но Eslint повышает синтаксис ошибки.

Пропустить Eslint, код должен быть таким:

// RequireLogin.js(fixed)
// @flow

import React from 'react'

export default (ComposedComponent: *) => {
  @inject('userStore')
  @observer
  class RequireLogin extends React.Component {
    render() {
      if (this.props.userStore.guest) return 
LOGIN REQUIRED
else return } } return RequireLogin }

Кстати, этот HOC прост в использовании:

// Home.js
// @flow

import React from 'react'
import RequireLogin from './RequireLogin'

@RequireLogin
export default class Home extends React.Component {
  render() {
    return 
Hello
} }

Этот HOC возвращается со ссылкой на введенный магазин MOBX.

  • При входе пользователя -> написанный компонент
  • Когда гостевой пользователь -> Компонент входа

Ref: https://github.com/yannickcr/eslint-plugin-react/issues/419.

Оригинал: “https://dev.to/acro5piano/eslint-with-class-decorator-14lp”