码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2020-06-10 19:09:35      阅读:78      评论:0      收藏:0      [点我收藏+]

标签:http   class   com   ===   权限控制   led   ble   xtend   api   

部分简化后的代码如下:

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属性

标签:http   class   com   ===   权限控制   led   ble   xtend   api   

原文地址:https://www.cnblogs.com/jimaww/p/13087336.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!