javascript - 从数组值渲染 React 组件

Question

我正在使用 Symfony API 开发 React，当我连接到我的应用程序时，我获得了 Symfony 定义的 Angular 色

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

如果我是主持人，则会返回此内容:["ROLE_USER", "ROLE_MODERATOR"]

如果我是用户，它会返回此内容:["ROLE_USER"]

目前我的代码工作正常，如果我是用户，它会显示用户 View ，如果我是主持人，它会显示主持人 View 等。所以我的问题是:是否有更好的方法来创建一个条件，使良好的组件能够发挥我的用户 Angular 色的功能？

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

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

Answer 1

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

第一个更干净一些。

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