问题: 我正在尝试做的是隐藏/显示react元素,这些元素是根据“构造的对象”的属性动态构造的。更准确地说,让我们采用以下对象数组:
const Apps = [
{name: App1, permission: ViewApp1},
{name: App2, permission: ViewApp2},
{name: App3, permission: ViewApp3},
{name: App4 },
]
我想map
遍历它们,并为每个项目在导航栏中创建一个nav-item
。
这里是jsx code
:
const ScreenModule = ({ apps = [], currentRoute }) => (
<Fragment>
{apps.map(app => (
<li
key={app.name}
title={app.name}
>
<a href={getUrlLink(app)}>
<span>{app.name}</span>
</a>
</li>
))}
</Fragment>
);
现在,通常当我想检查何时显示一个元素时,我将该jsx元素包装在以下实用程序函数中:
const AuthViewAdminManagement = ConditionalLoader(({ user }) =>
// user = The currently loggedIn user
userHasPermission(user, [
Role.ViewApp1 // My ConstantArray of Permissions to check against
])
);
那是一个静态元素。 我的问题在于如何对动态构建的应用执行完全相同的操作。
基本上,我正在尝试基于name
或permission
来有条件地包装li的方法。
此外,如何处理没有权限的App4
。如何在地图上显示/隐藏该地图。
我曾考虑过使用过滤器,过滤特定的权限或名称,但被卡住了。
我希望我弄清楚我的问题是什么。如果可以帮助,那就太好了。谢谢!
答案 0 :(得分:1)
您可以过滤:
const ScreenModule = ({ apps = [], currentRoute }) => (
<Fragment>
{apps.filter(app => app.permission).map(app => {
return <li
key={app.name}
title={app.name}
>
<a href={getUrlLink(app)}>
<span>{app.name}</span>
</a>
</li>
})}
</Fragment>
);
答案 1 :(得分:0)
我想这会帮助您
const ScreenModule = ({ apps = [], currentRoute }) => (
<Fragment>
{apps.map(app => {
return (app.permission ?
<li
key={app.name}
title={app.name}
>
<a href={getUrlLink(app)}>
<span>{app.name}</span>
</a>
</li>:null)
})}
</Fragment>
);