When I create a function which returns a Decorator attached class, ESLint cause an error.
We can write such function like this:
// RequireLogin.js(error)
// @flow
import React from 'react'
@inject('userStore')
@observer
export default (ComposedComponent: *) => class RequireLogin extends React.Component<Props> {
render() {
if (this.props.userStore.guest) return <div>LOGIN REQUIRED</div>
else return <ComposedComponent />
}
}
babel-plugin-transform-decorators-legacy can transform it as expected, but ESLint raise Syntax Error.
To pass ESLint, the code should be like this:
// RequireLogin.js(fixed)
// @flow
import React from 'react'
export default (ComposedComponent: *) => {
@inject('userStore')
@observer
class RequireLogin extends React.Component<Props> {
render() {
if (this.props.userStore.guest) return <div>LOGIN REQUIRED</div>
else return <ComposedComponent />
}
}
return RequireLogin
}
BTW, this HOC is simple to use:
// Home.js
// @flow
import React from 'react'
import RequireLogin from './RequireLogin'
@RequireLogin
export default class Home extends React.Component<Props> {
render() {
return <div>Hello</div>
}
}
This HOC returns referring to injected MobX's store.
- When login user -> composed component
- When guest user -> login component
ref: https://github.com/yannickcr/eslint-plugin-react/issues/419
Top comments (0)