Javascript 反应-如果用户没有权限，如何不在组件子级内部运行函数

我正在开发一个基于react的应用程序，在使用

HasRole

组件呈现一些jsx之前，我正在检查用户的权限。一切正常，除非我有一个函数作为HasRole组件的子函数，如果用户没有权限，则每次父组件呈现时都会调用该函数。我如何防止这种情况发生

HasRole.js

import React, { Component } from 'react';
import { connect } from 'react-redux';

class HasRole extends Component {
  render() {
    const { children, role, requiredRole } = this.props;
    if(!requiredRole.includes(role)) return null;
      return children;
    }
  }

  const getMapStateToProps = (extendWith = {}) => state => {
    return {
      role: state.auth.userType,
        ...extendWith
      }
  }

export default connect(getMapStateToProps)(HasRole);

import React, { Component } from 'react';
import HasRole from '../has-role';

class MovieShow extends Component{
  constructor(props){
    super(props);
  }

  renderUsers(){
    ...
  }
  render(){
    return(

       ...
       <HasRole requireRole={["admin"]}>
           {this.renderUsers} // this will run if user is not admin also but the component wont be shown
       </HasRole>

  }
}

当我使用HasRole组件检查权限时，如果用户也没有权限，则执行

{this.renderUsers}

MovieShow.js

import React, { Component } from 'react';
import { connect } from 'react-redux';

class HasRole extends Component {
  render() {
    const { children, role, requiredRole } = this.props;
    if(!requiredRole.includes(role)) return null;
      return children;
    }
  }

  const getMapStateToProps = (extendWith = {}) => state => {
    return {
      role: state.auth.userType,
        ...extendWith
      }
  }

export default connect(getMapStateToProps)(HasRole);

import React, { Component } from 'react';
import HasRole from '../has-role';

class MovieShow extends Component{
  constructor(props){
    super(props);
  }

  renderUsers(){
    ...
  }
  render(){
    return(

       ...
       <HasRole requireRole={["admin"]}>
           {this.renderUsers} // this will run if user is not admin also but the component wont be shown
       </HasRole>

  }
}

import React，{Component}来自'React'；
从“../has role”导入HasRole；
类MovieShow扩展组件{
建造师（道具）{
超级（道具）；
}
渲染器（）{
...
}
render（）{
返回(
...
{this.renderUsers}//如果用户也不是管理员，但组件不会显示，则将运行此操作
}
}

---

提前感谢！

将RenderUsers拖出类，使其成为无状态功能组件

---

通过这样做，您应该能够将requireRole参数传递给它，并将其锁定在权限后面。

执行

renderUsers

的原因是，尽管它在HasRole中呈现为子级，但它在父级中进行计算。您可以编写

HasRole

组件以与

RenderOps

lik一起使用e

class HasRole extends Component {
  render() {
    const { children, role, requiredRole } = this.props;
    if(!requiredRole.includes(role)) return null;
      return children();
    }
}

然后你会像这样使用它

class MovieShow extends Component{
  constructor(props){
    super(props);
  }

  renderUsers(){
    ...
  }
  render(){
    return(

       ...
       <HasRole requireRole={["admin"]}>
           {() => {return this.renderUsers()}}
       </HasRole>

  }
}

class MovieShow扩展组件{
建造师（道具）{
超级（道具）；
}
渲染器（）{
...
}
render（）{
返回(
...
{（）=>{返回this.renderUsers（）}}
}
}

基本上，据我所知，您想阻止HasRole在确定用户是否拥有正确的角色后重新渲染吗？@MaieonBrix感谢您查看它。实际上，如果用户没有权限，我不希望运行或渲染

中的任何内容。现在它被渲染并作为{children}传递到HasRole。基本上，我有一些

状态

逻辑，在调用函数时会受到影响，并且没有用户有权限。谢谢，@Shubham。这应该可以工作。但是我实际上在其他地方使用了

HasRole

，它们的子对象是平面

jsx

，而不是函数。为了让它们使用新模式，我尝试了chan将它们转换为类似于

{（）=>（…）}。但是它说

子项不是函数。我创建了一个演示，它在那里工作。你能检查一下是否有其他错误吗？在其他情况下，可能是你有多个子项的情况。错误说明子项在你的情况下不起作用。检查这个是的，可以，但是

这个。changeByAdminOnly（）当包装在fn中时，不会调用

，尽管它通过了权限检查。出于同样的原因，我创建了此测试

changeByAdminOnly

fn。感谢您的快速回答@p3rkNo problem@AneesMuhammed，希望您能够找到答案。当时正在工作，因此必须快速键入一些内容。