React js - disable rendering of a component in mixin
I am trying to develop Mix React to check the user access level before rendering a component.
If the user does not have permission to view the component, I would like to disable rendering of the component. I was looking for something built in to respond to this, but I couldn't find anything, so I did this:
var AuthentLevelMixin = {
componentWillMount: function() {
if(!Auth.check()) {
// Disable component render method
this.render = function () {
return false;
}
}
}
}
It works as expected, but I feel like this is the "dirty way".
So my question is, what is the "React way" for the same as this snippet?
source to share
If you want to handle authorization inside your mix without adding logic to your component, you are doing it right. BUT: Every component that implements this mixin needs to be aware of what is going on inside this mixin. If the result you are expecting is that nothing is displayed, then you are absolutely correct with what you are doing. So if your path leads to simplicity, this is the React Path. And in my opinion it is.
In the componentWillMount lifecycle event, you will capture the moment before rendering - this is a great time to prevent rendering. So I really don't see anything against your code.
EDIT:
aproach definitions: "react"
After you get the same input, making your code predictable every time. When your code is predictable, you achieve simplicity. These are the terms Pete Hunt uses to describe React's intent. So if you stay predictable and achieve simplicity as a result, you do it in a responsive way.
In the case of the above mixin, both of these rules apply and for that the "react mode" in the definition I outlined above.
source to share
For mixing, this is the best thing you can do. It's just a simple early return to rendering.
var AuthentLevelMixin {
isAuthenticated: function(){
return Auth.check();
}
};
var C = React.createClass({
mixins: [AuthentLevelMixin],
render: function(){
if (!this.isAuthenticated()) return <div />;
return (
<div>...</div>
);
}
});
If you decide to go with your original strategy (I don't recommend it), it needs to be tweaked a bit:
// more explicit names are important for dirty code
var PreventRenderUnlessAuthMixin = {
componentWillMount: function() {
this._originalRender = this.render;
this._setRenderMethod();
},
componentWillUpdate: function(){
this._setRenderMethod();
}.
_emptyRender: function () {
return <span />;
},
_setRenderMethod: function(){
this.render = Auth.check() ? this._originalRender : this._emptyRender;
}
}
source to share
My advice here would be not to use a mixin. The best way to clean up your component is to remove this logic from the component and just not render the component based on the Auth check result.
The problem is that you have a component that is no longer consistent because it depends on something other than its props. It doesn't really do anything other than pushing the problem up, but it does allow you to have another clean component.
I can see why the mixin is attractive, so here's an easier way to do what you need, which is not related to dynamically replacing the render method:
var PreventRenderUnlessAuthMixin = {
componentWillMount: function () {
var oldRender = this.render;
this.render = function () {
return Auth.check() ? this.render() : <div />
}.bind(this);
}
}
source to share