如何根据ACL对象呈现反应组件？

Question

我有一个对象作为波纹管用户ACl(Access Control list)：

{ 
 
    'api/modelA': ['GET', 'POST'], 
 
    'api/modelB': ['GET'], 
 
    /*...*/ 
 
    'api/modelZ' : ['GET'] 
 
}

用户通过验证后，我从服务器获取ACLs所以经过。 如何根据这些ACls找到用于渲染所有组件的解决方案。例如，如果用户无权编辑帖子，则不应呈现EditButtom组件。

注意：对于某些情况下，如果用户没有访问权限，组件将具有不同的样式，如灰色。

Answer 1

您可以在组件上使用更高阶的组件（比如EditButton）。

function HOC(Component) { 
    if(ACL(model).indexOf("POST) 
    return <Component style={{display: none}} />; 

    return <Component {...this.props}>; 
} 

render(){ 
    const HocButton = HOC(EditButton); // EditButton is some button 

    return (<EditButton>Edit</EditButton>; 
}