作者:上海千恩万燮 | 来源:互联网 | 2023-07-22 10:27
项目中需要对页面元素根据权限进行显示隐藏,所以用到了高阶组件。
高阶函数如下:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28
| import React,{Component,PropTypes} from 'react';
//高阶组件,用于权限校验
export let wrapAuth = ComposedCompOnent=>class WrapComponent extends Component {
// 构造
constructor(props) {
super(props);
// 初始状态
this.state = {};
}
static propTypes = {
auth:PropTypes.string.isRequired,
};
checkAuth = ()=> {
//判断是否有权限
};
render() {
if (!this.checkAuth()) {
return null;
} else {
return ;
}
}
}; |
直接作为组件参数传递给高阶函数,结果报错
1 2 3 4
| import {Button} from 'antd';
import {wrapAuth} from "./AuthWrapper";
const AuthButton = wrapAuth(Button); |
只好这样写,又多包了一层。
1 2 3 4 5 6 7 8 9 10 11 12
| const AuthButton = wrapAuth(class extends Component{
// 构造
constructor(props) {
super(props);
// 初始状态
}
render(){
return (
);
}
}); |
我觉得这样不科学,是我的写法不当吗?求解答