Когда я создаю функцию, которая возвращает класс прикрепленного декоратора, 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 REQUIREDelse 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 REQUIREDelse 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”