javascript - 显示/隐藏按钮的条件渲染 - ReactJs

Question

如果有，我想隐藏一个菜单按钮。 Baiscly 如果不允许用户看到菜单，我会从 token 中收到一个空的 rol(基本上 rol : [''] ，否则如果允许是 rol : ['_DECLARATION' ]。我尝试过条件渲染，但也许我弄错了我使用的方法。如果有人能伸出援手，那就太好了。

 constructor(props) {
        super(props);
        this.state = {
                roles: '' 
                     }

async componentDidMount() {
const base64Url = token.split('.')[1];
const decodedValue = JSON.parse(window.atob(base64Url))
const roles = decodedValue.roles;

 render() {
 const { roles } = this.state
    return (

        { roles 
        ? <Button className="emptyRollButtonDec"/>
        : <Button
          onClick={this.changeActiveComponent
          style= {{
              background: branding.color.colorPrimary,
              color: branding.color.colorTextPrimary
                  }}>
           Declaration
           </Button>
         }

我不知道，我不明白我哪里错了。

Answer 1

您已将状态中的 roles 定义为零长度字符串。这意味着当您在渲染方法中从状态中解构它时，它是已定义的，而不是未定义的。 这 意味着您不能使用现有的三元检查，因为 roles ? something : somethingelse 检查 roles 是否已定义。

要更正此问题，请改为检查 Angular 色 的长度。如果为零，则返回空按钮，否则显示事件按钮:

!roles.length ? showEmptyButton : showActiveButton