方法表达式不是函数类型（等于状态属性/值）-React JS

Question

我当前正在尝试执行条件语句，这些语句使我可以根据用户角色显示div。首先，我要求该角色并将其设置为状态值。

我可以在开发工具控制台中查看这些设置，很好。但是，当我尝试对作为字符串的常量进行以下条件检查时：

props = {
     subRole = ''
}


{(!this.state.AdminRole && subRole.toString() === READ_ONLY (
       //div goes here
))}

然后我得到：

  Object(...) is not a function

在subRole.toString() === READ_ONLY支票上，Webstorm告知：

  method expression is not of function type

Answer 1

READ_ONLY作为一种方法被调用，这就是为什么您会收到错误消息。在呈现元素之前添加&&：

{(!this.state.AdminRole && subRole.toString() === READ_ONLY && (
       //div goes here
))}

还修复=

props = {
     subRole : ''
}

Answer 2

您已声明subRole不正确。在对象表示法中，我们使用:作为键。 请先进行以下更改。

props = {
     subRole : ''
}

如果要初始化默认道具： //例如您的组件是App.js

App.defaultProps = {
  roles : {
    subRole: 'c'
  }
};

稍后您可以在组件中访问它，例如：

this.props.roles.subRole

这是推荐的方式，但是通常我们不使用默认道具，而是更关注组件的默认状态。