從數組值渲染React組件

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

我已經檢查過了： 基於變量的渲染組件-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來做到這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>
    )
}