React设计权限控制时通过cloneElement修改元素的props属性

Posted jimaww

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了React设计权限控制时通过cloneElement修改元素的props属性相关的知识,希望对你有一定的参考价值。

部分简化后的代码如下:

interface Iprops {
    roles: string;
}

export class Authorize extends React.Component<Iprops, any>{
    renderDom() {
        const { roles, children } = this.props;
        if (authorize(roles) === true) {
            return this.props.children;
        } else if (authorize(roles) === ‘disable‘) {
            return Children.map(children, (child: any) => cloneElement(child, { disabled: true }));
        } else {
            return null;
        }
    }

    render(): any {
        return this.renderDom();
    }
}

注意:设置disabled属性需要子组件对props中的disabled有处理,否则也是无效的,如:可用material-ui的button组件作为子组件测试。

关于 cloneElement https://zh-hans.reactjs.org/docs/react-api.html#cloneelement

以上是关于React设计权限控制时通过cloneElement修改元素的props属性的主要内容,如果未能解决你的问题,请参考以下文章

前后端分离如何做权限控制设计?

前后端分离后的权限控制设计​方案

前后端分离权限控制设计和实现思路

前后端分离权限控制设计和实现思路

企业管理系统前后端分离架构设计 系列一 权限模型篇

React项目配置6(前后端分离如何控制用户权限)