babel-plugin-transform-decorators-legacy icon indicating copy to clipboard operation
babel-plugin-transform-decorators-legacy copied to clipboard

Decorator not applied on same react child components

Open nd0ut opened this issue 9 years ago • 6 comments

var count = 0;

@connect(state => ({
    products: state.products
}))
export default class ParameterNode extends React.Component {
    constructor(props, context) {
      super(props, context);
      console.log('props', props);
    }

    render() {
        count = count + 1;

        if(count < 5) {
            return <ParameterNode />;
        }
        else {
            return <div></div>;
        }
    }

}

And the console output:

props Object {products: Object}
props Object {}
props Object {}
props Object {}
props Object {}

On the babel 5 it's ok.

nd0ut avatar Jan 26 '16 12:01 nd0ut

Would you be able to trim down a reproducible version with a simple decorator? I don't know how connect works. If not I can give it a shot eventually.

loganfsmyth avatar Jan 26 '16 16:01 loganfsmyth

@loganfsmyth hmm, it seems that there is problem with react-redux connect decorator cause with simple decorator all works fine. Sorry for disturbing.

nd0ut avatar Jan 27 '16 14:01 nd0ut

I was wrong.

function wrap(wrappedComponent) {
    class Wrapper extends React.Component {
        render() {
            return React.createElement(wrappedComponent, this.props);
        }
    }
    return Wrapper;
};

@wrap
export class Node extends React.Component {

    render() {
        const nodes = [
            <Node alone />,
            <Node alone />,
            <Node alone />
        ];

        if(this.props.alone) {
            return <div>Node</div>;
        }
        else {
            return <div>{nodes}</div>;
        }
    }
}

As result: one wrapper, many nodes.

Expected: each node wrapped by wrapper (babel-5 behavior)

nd0ut avatar Jan 28 '16 12:01 nd0ut

Perfect, thanks for the great example. I've got a busy week, but I'll try to get to this when I can.

loganfsmyth avatar Jan 28 '16 16:01 loganfsmyth

I'm a little on the fence on this, now that I look into it more. It seems like an edge-case where Babel 5's behavior differers from my reading of the spec. The https://github.com/wycats/javascript-decorators#desugaring-es6 ES6 class desugaring example from the decorator repo is the logic that I follow in this implementation. My reading of that would imply that usage of Note within the Note class body, would still refer to the original class constructor, not the one returned from the decorator function.

At the moment, I'm tempted to lean toward adding this as a third entry in the "Best Effort" list in the README.

loganfsmyth avatar Jan 31 '16 07:01 loganfsmyth

Any updates?

amino-studio avatar Jan 31 '17 03:01 amino-studio