时间戳

首页 > 解决方案 > 根据用户权限渲染 React 组件

javascript - 根据用户权限渲染 React 组件

问题描述

我需要根据用户角色渲染一个组件。

例如：如果用户是销售人员，他会看到两个按钮。但如果他是支持者，他只会看到第二个按钮。

import React from 'react';
import Button from './MyCustomButton';

class App extends React.PureComponent {

  render() {
    return (
      <Grid>
        <Button> // visible only for sales manager
          Action A
        </Button>
        <Button> // visible for support and sales manager
          Action B
        </Button>
      </Grid>
    )
  }
}

我真的很想避免在渲染中使用 if-else 语句。尽可能保持清洁。

是否有一个好的设计或一些工具/装饰器可以在这里有用？

我已经在服务器端处理了它，但我也需要一个干净的客户端解决方案。

谢谢。

标签： javascriptreactjs

解决方案

您可以将三元语句直接内联到组件树中，如下所示。如果这些布尔表达式的计算结果为false，react 将自动跳过它们。

class App extends React.PureComponent {

  render() {
    const user = this.props.user;
    return (
      <Grid>
        {user.isSalesManager && <Button>
          Action A
        </Button>}
        {(user.isSalesManager || user.isSupport) && <Button>
          Action B
        </Button>}
      </Grid>
    )
  }
}

为了做到这一点，您需要在道具中获得有关用户角色的信息。

在React 文档中阅读更多关于条件渲染的内容。

推荐阅读