Javascript 在渲染方法中组织链接

我发现了一个导航条链接，它按照

render（）

方法中创建的

const

字段显示。虽然代码工作得很好，但我正在尝试做更多的工作

如果用户是超级管理员（比方说），我想同时显示

超级管理员链接

和

用户链接

。我尝试了多种方法，但都没有成功。任何帮助都将不胜感激。谢谢

我的

render（）

代码片段如下所示

render() {


            const isSuperAdmin = user.user_role === "SUPER_ADMIN";


            const userLeftMenu = (
                <ul className="nav nav-sidebar">
                    <li>UserLink1</li>
                    <li>UserLink2</li>
                </ul>
            )

            const superAdminLeftMenu = (
                <ul className="nav nav-sidebar">
                    <li>SuperAdminLink1</li>
                    <li><SuperAdminLink2</li>
                </ul>
            )

            return (
                    <header>
                        <div className="container-fluid">
                            <div className="row">
                                <div className="col-sm-3 col-md-2 sidebar">
                                 { isSuperAdmin ? superAdminLeftMenu : userLeftMenu  }
                                </div>
                            </div>
                        </div>
                   </header>
            );
    }

render（）{
const isSuperAdmin=user.user\u role==“超级管理员”；
const userLeftMenu=(

用户链接1
用户链接2

)
常量superAdminLeftMenu=(

超级管理员链接1

{isSuperAdmin？superAdminLeftMenu:userLeftMenu}
{isSuperAdmin&&userLeftMenu}

{isSuperAdmin？superAdminLeftMenu:userLeftMenu}
{isSuperAdmin&&userLeftMenu}
返回(
{isSuperAdmin&&superAdminLeftMenu}
{isSuperAdmin&&userLeftMenu}
)
返回(
{isSuperAdmin&&superAdminLeftMenu}
{isSuperAdmin&&userLeftMenu}
)
您可以使用：


const{render}=ReactDOM；
const role=“超级管理员”；
常量应用=（）=>{
const isSuperAdmin=角色==“超级管理员”；
const userLeftMenu=(
用户链接1
用户链接2
);
常量superAdminLeftMenu=(
超级管理员链接1
超级管理员链接2
{userLeftMenu}
);
返回(

{isSuperAdmin？superAdminLeftMenu:userLeftMenu}

);
};
render（，document.getElementById（“根”）；

您可以使用：


const{render}=ReactDOM；
const role=“超级管理员”；
常量应用=（）=>{
const isSuperAdmin=角色==“超级管理员”；
const userLeftMenu=(
用户链接1
用户链接2
);
常量superAdminLeftMenu=(
超级管理员链接1
超级管理员链接2
{userLeftMenu}
);
返回(

{isSuperAdmin？superAdminLeftMenu:userLeftMenu}

);
};
render（，document.getElementById（“根”）；
如果
UserLeftMenu
始终在
SuperUserLeftMenu
中，则我们可以使用一种更好的方法来执行此操作。此表单允许在相同的
If
语句中返回您想要的所有组件：


const{render}=ReactDOM；
const role=“超级管理员”；
常量应用=（）=>{
const isSuperAdmin=角色==“超级管理员”；
const UserLeftMenu=（）=>(
用户链接1
用户链接2
);
const SuperAdminLeftMenu=（）=>(
超级管理员链接1
超级管理员链接2
);
返回(
{发布管理员
? 
/* 
返回“SuperAdminLeftMenu”和“UserLeftMenu”
组件。如果您返回此
窗体中，可以返回所需的所有组件
在同一个if中
*/
:  
}
);
};
render（，document.getElementById（“根”）；
如果
UserLeftMenu
始终在
SuperUserLeftMenu
中，则我们可以使用一种更好的方法来执行此操作。此表单允许在相同的
If
语句中返回您想要的所有组件：


const{render}=ReactDOM；
const role=“超级管理员”；
常量应用=（）=>{
const isSuperAdmin=角色==“超级管理员”；
const UserLeftMenu=（）=>(
用户链接1
用户链接2
);
const SuperAdminLeftMenu=（）=>(
超级管理员链接1
超级管理员链接2
);
返回(
{发布管理员
? 
/* 
返回“SuperAdminLeftMenu”和“UserLeftMenu”
组件。如果您返回此
窗体中，可以返回所需的所有组件
在同一个if中
*/
:  
}
);
};
render（，document.getElementById（“根”）；

awesome。一旦逻辑变得有点复杂，这将更具可读性。Dalthogh@Subin的答案解决了我的问题。这看起来更为有组织和干净。我将实现这一点：-）太棒了。一旦逻辑变得有点复杂，这将更具可读性。Dalthoh@Subin的答案解决了我的问题。这看起来更加有组织和干净。我将实现这一点：-）即使你已经找到了问题的解决方案，看看我的答案，我想你可能会感兴趣，因为未来的应用程序能够如果

，在同一个

中urn几个div。我希望是
<div className="col-sm-3 col-md-2 sidebar">
   { isSuperAdmin ? superAdminLeftMenu : userLeftMenu  }
   { isSuperAdmin && userLeftMenu  }
</div>

return (
   <header>
     <div className="container-fluid">
       <div className="row">
         <div className="col-sm-3 col-md-2 sidebar">
           { isSuperAdmin && superAdminLeftMenu }
           { isSuperAdmin && userLeftMenu }   
         </div>
       </div>
     </div>
   </header>
)