Using ES7 Decorators as Mixins

Re:Using ES7 Decorators as Mixins by elierotenberg on Friday June 26, 2015 @05:49PM (#9787962)

One really useful pattern is React higher-order components, eg. https://github.com/elierotenberg/react-nexus#componentgetnex...

The pattern is

  function decorate(params) {
    return (Component) => class extends React.Component {
      ... // some code using params
      render() {
        return <Component {...this.props} />
      }
    };
  }

my2c.

[ Parent | on HN ]

Re:Using ES7 Decorators as Mixins by mikewhy on Friday June 26, 2015 @06:29PM (#9788123)

I haven't seen that usage for higher-order components before. This is the pattern I've been following:

    function decorate (Component) {
      let HigherOrderComponent = React.createClass({
        render () {
          return <Component {...this.props} />
        }
      })
      
      return HigherOrderComponent
    }

as explained here: https://medium.com/@dan_abramov/mixins-are-dead-long-live-hi...

[ Parent | on HN ]

Re:Using ES7 Decorators as Mixins by HeyImAlex on Friday June 26, 2015 @07:03PM (#9788243)

They are the same I think, only one has extra parameters. At least in Python, @fn(...args) evaluates the function first and uses the result as a decorator. The guy who wrote the blog post you mention actually uses the parent's pattern in react-dnd.

[ Parent | on HN ]