Getters in mixin

[JAStanton]

I want to use ES5 style getters inside of a mixin. It blows up when it comes to this line inside of ReactClass where by it invokes my getter method while it's mixing it in. This has some unexpected behavior.
https://github.com/facebook/react/blob/master/src/isomorphic/classic/class/ReactClass.js#L485

const fooMixin =  {
 componentWillMount() {
  this.myFoo = 'bar';
 }
 get foo() {
   return this.myFoo;
 }
}

const MyComponent = React.createClass({
  mixins: [fooMixin],
  render() {
    return <span>{this.foo}</span>
  }
});

[zpao]

Hmm, surprisingly I don't think this has come up before.

I'm not sure if we want to support getters/setters in mixins. It wouldn't be terribly hard but it would probably be slower (we'd have to use getOwnPropertyDescriptor). We could guard against it in DEV and warn though. Any opinions @sebmarkbage @spicyj?

[nevir]

Kinda surprised it hasn't come up for non-enumerable properties too; might want to iterate over Object.getOwnPropertyNames

[sebmarkbage]

Non-enumerable has come up before. Our mixin system is flawed in more than one way. Personally, I think that coming up with a whole new mixin system that works with any ES6 class would be much better leverage than upgrading React's old class system to support it.

The only reason I don't like this change is because it would cause people to have to do upgrade work to ensure this doesn't break their code. It seems like adding this to a new class system would be better since this allows people to optionally opt in to the new and better system.

[brigand]

@JAStanton and others, I'm just curious, what are use cases for getters in mixins? Or is this more about mixins using property descriptors over keys and values as a generally better approach?

This was also requested on react-mixin but I assumed it came from a strange implementation in a third-party mixin.

[gordonkristan]

I ran into this issue today. I created a QA mixin that allows us to easily define attributes on elements. So it looks like this:

const Component = React.createClass({
    mixins: [QaAttributesMixin],
    render() {
        return <div {...this.qaAttributes}>...</div>;
    }
});

While it's trivial to turn qaAttributes into a method (which I did), I think it would be nice to be able to use a getter instead. In my mind getters and methods have two entirely different purposes, so I'm not a huge fan of using the latter in place of the former.

[zpao]

I'm going to close this out and just say that we aren't going to do this.