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

Question

我需要根据用户 Angular 色呈现一个组件。

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

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 语句。尽可能保持清洁。

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

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

谢谢。

Answer 1

您可以将三元语句直接内联到您的组件树中，如下所示。如果这些 bool 表达式的计算结果为 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>
    )
  }
}

为此，您需要在 props 中获得有关用户 Angular 色的信息。

在 React documentation 中阅读更多关于条件渲染的信息.