Question

我正在使用Symfony API进行React，当我连接到我的应用程序时，我有一个由Symfony定义的角色

如果我是管理员，它将返回以下内容：["ROLE_USER", "ROLE_ADMIN"]

如果我是主持人，它将返回以下内容：["ROLE_USER", "ROLE_MODERATOR"]

如果我是用户，它将返回此值：["ROLE_USER"]

当前我的代码运行良好，如果我是用户，它会显示用户视图，如果我是主持人，它将显示主持人视图等。所以我的问题是：是否有更好的方法来创建一个条件，该条件将在用户角色中发挥良好的作用？

render()
  {
      let content = "";
      if (this.props.auth.user.roles.includes("ROLE_ADMIN")) {
          content = <NavAdminDashboard />;
      } else if (this.props.auth.user.roles.includes("ROLE_MODERATOR")) {
          content = <NavModeratorDashboard />;
      } else {
          content = <NavUserDashboard />;
      }

      return (
          <Fragment>
              {content}
          </Fragment>
      )
  }

我已经检查过：Render component based on a variable - reactjs

这比我的代码要好，但是只有当我的角色呈现为字符串而不是像代码一样呈现为数组时，它才起作用。

Answer 1

我认为您的代码很好，不需要更改。但是我个人将角色逻辑移至外部功能（可以进行单元测试）或组件上的方法。例如：

get isAdmin() {
  return this.props.roles.include('ADMIN');
}

get isUser() {
  return !this.props.roles.some(role => role !== 'USER');
}

render() {
  return <>
    {this.isAdmin && <Admin />}
    {this.isUser && <User />}
  </>
}

另一种替代方法是将角色解析移至辅助函数并将数组映射至prop。例如：

<Component isAdmin={hasAdminRole(roles)} />

如果您问我，这两种都是更好的解决方案。但是最后，只要代码起作用，它可能就足够了。您随时可以返回并稍后进行重构。

Answer 2

您可以通过两种方式实现这一目标

第一个是清洁工。

render(){
    const {roles} = this.props.auth.user;

    return (
        <React.Fragment>
            { roles.include("ROLE_ADMIN") && <NavAdminDashboard /> }
            { roles.include("ROLE_MODERATOR") && <NavModeratorDashboard  /> }
            { !roles.include("ROLE_ADMIN") && !roles.include("ROLE_MODERATOR) && <NavUserDashboard  /> }
        </React.Fragment>
    )
}

您还可以通过创建两个方法isAdmin和isModerator来做到这一点：

isAdmin = () => {
    return this.props.auth.user.roles.include("ROLE_ADMIN");
}

isModerator = () => {
    return this.props.auth.user.roles.include("ROLE_MODERATOR");
}

render() {
    return (
        <React.Fragment>
            { this.isAdmin() && <NavAdminDashboard /> }
            { this.isModerator() && <NavModeratorDashboard  /> }
            { !this.isAdmin() && !this.isModerator() && <NavUserDashboard  /> }
        </React.Fragment>
    )
}

或者您可以添加isUser方法来检查其唯一用户


isUser = () => {
    const {roles} = this.props.auth.user;
    return roles.include("ROLE_USER") && roles.length === 1;
}

render() {
    return (
        <React.Fragment>
            { this.isAdmin() && <NavAdminDashboard /> }
            { this.isModerator() && <NavModeratorDashboard  /> }
            { this.isUser() && <NavUserDashboard  /> }
        </React.Fragment>
    )
}

从数组值渲染React组件

2 个答案: