Question

我正在使用JHipster 5.0.1和React。我有三个按钮：查看，编辑，删除。我希望仅当用户为Admin时，“删除”按钮才可用。

这是我的源代码。感谢您的帮助。

<td className="text-right">
   <div className="btn-group flex-btn-group-container">
      <Button tag={Link} to={`${match.url}/${kategori.id}`} color="info" size="sm">
          <FontAwesomeIcon icon="eye" />{' '}
          <span className="d-none d-md-inline">
              <Translate contentKey="entity.action.view">View</Translate>
          </span>
      </Button>
      <Button tag={Link} to={`${match.url}/${kategori.id}/edit`} color="primary" size="sm">
          <FontAwesomeIcon icon="pencil-alt" />{' '}
          <span className="d-none d-md-inline">
              <Translate contentKey="entity.action.edit">Edit</Translate>
          </span>
      </Button>
      <Button tag={Link} to={`${match.url}/${kategori.id}/delete`} color="danger" size="sm">
          <FontAwesomeIcon icon="trash" />{' '}
          <span className="d-none d-md-inline">
              <Translate contentKey="entity.action.delete">Delete</Translate>
          </span>
      </Button>
   </div>
</td>

Answer 1

我不知道isadmin包含布尔值的变量是什么，但是对于条件渲染，您可以这样做：

{ isadmin && 
  <Button tag={Link} to={`${match.url}/${kategori.id}/delete`} color="danger"   size="sm">
          <FontAwesomeIcon icon="trash" />{' '}
          <span className="d-none d-md-inline">
              <Translate contentKey="entity.action.delete">Delete</Translate>
          </span>
  </Button>
}

Answer 2

处理连接的reducer函数也在商店中设置isAdmin属性。在生成的文件中有一个使用此道具的示例。

在src/main/webapp/app/app.tsx处查看如何从商店购买道具，在src/main/webapp/app/shared/layout/header/header.tsx处查看如何使用道具。

Jhipster React如何根据用户角色隐藏元素

2 个答案: