我正在尝试开发一个 React mixin 以在渲染组件之前检查用户访问级别。
如果用户没有查看组件的权限，我想禁用组件的渲染。 我一直在寻找一些内置的东西来处理这个问题，但什么也没找到，所以我这样做了：
var AuthentLevelMixin = {
componentWillMount: function() {
if(!Auth.check()) {
// Disable component render method
this.render = function () {
return false;
}
}
}
}
它按预期工作，但我觉得这是“肮脏的方式”。
所以我的问题是：与此 sn-p 相同的“反应方式”是什么？
【问题讨论】：
标签： javascript mixins reactjs
如果你想在你的 mixin 中处理授权而不向你的组件添加逻辑，那么你的做法是正确的。但是：每个实现这个 mixin 的组件都应该知道这个 mixin 中发生了什么。如果您期望的结果是没有渲染任何内容，那么您所做的就是完全正确的。因此，如果您的方式是简单的，那就是 React-Way。在我看来，情况就是这样。
在 componentWillMount 生命周期事件中，您将捕获渲染前的时刻 - 这是阻止渲染的好时机。所以我真的没有看到任何反对你的代码的东西。
编辑：
定义方法：“反应方式”
一旦您有相同的输入，每次您的代码变得可预测时都会产生相同的输出。随着您的代码是可预测的，您可以实现简单性。这些是 Pete Hunt 用来描述 React 意图的术语。因此，因此，如果您保持可预测性并最终实现简单性，那么您就是以反应方式进行操作。
在上述混合的情况下，这两个规则都适用，因此是我上面提供的定义中的“反应方式”。
【讨论】：
对于一个 mixin，这是你能做的最好的。这只是一个简单的渲染早期返回。
var AuthentLevelMixin {
isAuthenticated: function(){
return Auth.check();
}
};
var C = React.createClass({
mixins: [AuthentLevelMixin],
render: function(){
if (!this.isAuthenticated()) return <div />;
return (
<div>...</div>
);
}
});
如果你决定采用你最初的策略（我不推荐它），它只需要稍微修改一下：
// 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;
}
}
【讨论】：
我的建议是不要使用 mixin。清理组件的最佳方法是从组件中删除此逻辑，并且根本不根据检查 Auth 的结果渲染组件。
这样做的问题是你有一个不再一致的组件，因为它依赖于除了它的 props 之外的其他东西。除了将问题向上推外，这实际上并没有多大作用，但它确实允许您拥有一个更纯的组件。
我明白为什么 mixin 很有吸引力，所以这里有一种更简单的方法来做你需要的事情，它不涉及动态交换渲染方法：
var PreventRenderUnlessAuthMixin = {
componentWillMount: function () {
var oldRender = this.render;
this.render = function () {
return Auth.check() ? this.render() : <div />
}.bind(this);
}
}
【讨论】：