Вам хватит простых условий:
render() {
const { me, project, users } = this.props;
const isMeModerator = isModerator(me);
const isMeCreator = me.id === project.creator_id;
const shouldShowSearchForm = isMeModerator || isMeCreator;
return (
<div>
{shouldShowSearchForm && <Search />}
<ul>
{users.map(user => {
const isUserCreator = user.id === project.creator_id;
const shouldShowDeleteButton = (isMeModerator || isMeCreator) && !isUserCreator;
return (
<li key={user.id}>
{user.name}
{shouldShowDeleteButton && <Button>Delete</Delete>}
{isUserCreator && <CreatorLabel />}
</li>
);
}}
</ul>
</div>
);
}
Если в приложении много элементов которые зависят от ролей и полномочий можно написать контейнер с интерфейсом вида:
<PermissionsChecker requiredPermissions={permissions}>
<SomeComponent />
</PermissionsChecker>
Тут permissions можно коннектить в PermissionsСhecker из стора и сверять с полученными в свойстве requiredPermissions и в случае наличия необходимых прав в store, возвращать дочерний компонент, в противном случае null.
