Say that a React class is defined as a pure function, as described in this article and in this question. For example:
const Text = ({children}) =>
<p>{children}</p>
instead of
class Text extends React.Component {
render() {
return <p>{this.props.children}</p>;
}
}
Can the component defined as a pure render function be still decorated?
For example, I can decorate the class using connect from react-redux and bindActionCreators from redux:
@connect(
state => someSelectors(state),
dispatch => bindActionCreators(someActions, dispatch)
)
class Text extends React.Component {
render() {
return <p>{this.props.children}</p>;
}
}
export default Text;
Would decorating the version written as a pure function work as expected? In particular, will this work:
//Text.js
const Text = ({children}) =>
<p>{children}</p>
export default connect(
state => someSelectors(state),
dispatch => bindActionCreators(someActions, dispatch)
)(Text);
When I try to compile some code implemented like in the example above I am getting the import/no-named-as-default-member error from ESLint in index.js that tries to import the exported decorated function:
//index.js
import Text from 'Text.js'; // <= error: import/no-named-as-default-member
It seems that decorating functions in JavaScript should be possible with the Babel transpiler. But even if that function was decorated properly, would React still use it correctly? The ESLint error is a bit worrying.
