时间戳

首页 > 解决方案 > 从数组值渲染 React 组件

javascript - 从数组值渲染 React 组件

问题描述

我正在使用 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>
      )
  }

我已经检查过了：基于变量渲染组件 - reactjs

它比我的代码更好，但只有当我的角色呈现为字符串而不是像我的代码那样呈现为数组时才有效。

标签： javascriptreactjs

解决方案

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

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 />}
  </>
}

另一种选择是将角色解析移动到辅助函数并将数组映射到道具。例如：

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

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

推荐阅读