Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Mixins aren't available to custom propType validations #431

Closed
tommyh opened this issue Oct 16, 2013 · 4 comments
Closed

Mixins aren't available to custom propType validations #431

tommyh opened this issue Oct 16, 2013 · 4 comments

Comments

@tommyh
Copy link

tommyh commented Oct 16, 2013

In writing a custom propTypes validation function, I would like to be able to access mixins, for shared validation behavior.

Given the following mixin:

var MyMixin = {
    nameValidation: function(){
        console.log("won't be run...");
    }
};

My goal would be that I could do the following:

var Hello = React.createClass({
    mixins: [MyMixin],

    propTypes: {
        name: function(){
            this.nameValidation();            
        }
    },

    render: function() {
        return <div>Hello {this.props.name}</div>;
    }
});

But this fails because this is window, not the instance. Is it possible to autobind propType functions?

Here is a jsfiddle of the above code (slightly modified): http://jsfiddle.net/kXysA/1/

For reference: I also tried the following, but I'm not surprised this failed because this is undefined in this context:

var Hello = React.createClass({
    mixins: [MyMixin],

    propTypes: {
        name: this.nameValidation
    },

    render: function() {
        return <div>Hello {this.props.name}</div>;
    }
});
@tommyh
Copy link
Author

tommyh commented Oct 16, 2013

Note: My current workaround is to make the mixin available globally and use it directly.

window.MyMixin = {
    nameValidation: function(){
        console.log("won't be run...");
    }
};
...
    propTypes: {
        name: function(){
            window.MyMixin.nameValidation();            
        }
    },
...

I'm fairly new to the react.js source, so I have no idea the level of effort for this enhancement request. But seeing how there is a reasonable workaround, I'm not viewing this as a high priority request.

@sophiebits
Copy link
Collaborator

This makes sense to me. Should be a pretty simple fix -- just change

checkProp(props, propName, componentName);

to

checkProp.call(this, props, propName, componentName);

in src/core/ReactCompositeComponent.js:681.

@tommyh
Copy link
Author

tommyh commented Oct 16, 2013

Made this patch in my project and works great! I'll open a pull request.

@zpao
Copy link
Member

zpao commented Sep 23, 2014

I'm pretty sure we're never going to make this happen. We've moving towards a more static world for proptypes so using this doesn't really make sense.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants