前言
所谓高级组件，即：接受一个组件作为参数，并且其返回值也为一个react组件
而大家应该都知道，权限控制算是软件项目中的常用功能了。在网站中，权限控制一般分为两个维度：页面级别和页面元素级别。
我们来说说页面元素粒度的权限控制。在某个页面中，有个“创建用户”的按钮，管理员才能看到。
一般想到的做法类似这样
class Page extends Component{
render() {
let hasCreatePermission = tool.getAuth("createUser");
return (
<div>
{hasCreatePermission "htmlcode">
render() {
let hasCreatePermission = tool.getAuth("createUser");
return (
<div>
{hasCreatePermission "htmlcode">
render() {
let hasCreatePermission = tool.getAuth("createUser");
return (
<div>
{hasCreatePermission "权限不足，请找管理员小K申请")}>创建用户</Button>}
</div>
);
}
如果网站中只有几个权限控制的按钮还好，想象一下，如果有50+这样的按钮，内心是不是想砍需求方？
需求方是不敢砍的。那么有没有一种方法，可以统一控制无权限时候的表现呢？
有。让我们来试试React的高阶组件吧。
export let wrapAuth = ComposedComponent =>class WrapComponent extends Component {
// 构造
constructor(props) {
super(props);
}
static propTypes = {
auth:PropTypes.string.isRequired,
};
render() {
if (tool.getAuth(this.props.auth)) {
return <ComposedComponent { ...this.props} />;
} else {
return null;
}
}
};
这个方法实际上是一个包装器，接受一个组件参数，根据权限，返回一个新的组件。
然后页面按钮的权限控制实现改成：
const AuthButton = wrapAuth(Button);
class Page extends Component{
render() {
return (
<div>
<AuthButton auth="createUser">创建用户</AuthButton>
</div>
);
}
}
当遇到前面所说的需求变动时，现在只要把包装器里return null这行代码改成
return <ComposedComponent disabled={true} { ...this.props} />
或者
return <ComposedComponent onClick={()=>alert("权限不足，请找管理员小K申请")} { ...this.props} />
就行啦。
嗯，高阶组件让生活又美好了一些~
总结
以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流，谢谢大家对的支持。
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！
如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
狼山资源网 Copyright www.pvsay.com
暂无“react高阶组件经典应用之权限控制详解”评论...
P70系列延期，华为新旗舰将在下月发布
3月20日消息，近期博主@数码闲聊站 透露，原定三月份发布的华为新旗舰P70系列延期发布，预计4月份上市。
而博主@定焦数码 爆料，华为的P70系列在定位上已经超过了Mate60，成为了重要的旗舰系列之一。它肩负着重返影像领域顶尖的使命。那么这次P70会带来哪些令人惊艳的创新呢？
根据目前爆料的消息来看，华为P70系列将推出三个版本，其中P70和P70 Pro采用了三角形的摄像头模组设计，而P70 Art则采用了与上一代P60 Art相似的不规则形状设计。这样的外观是否好看见仁见智，但辨识度绝对拉满。