Question

我正在创建一个网站，将用户分为管理员和普通用户。

除非他是经过身份验证的用户，否则不应将某些路由组件显示为其他用户详细信息的视图。

此外，不仅应该向普通用户显示，普通用户也无法访问。我应该在哪里修改代码 ReactDOM.render（.....）或在组件内？

Answer 1

你应该在组件内部进行。 ReactDOM.render接受React组件和DOM元素。它用于让React通过在其中呈现该组件来控制该DOM元素的内容。通常，大多数网络应用只有一个ReactDOM.render，并且在HTML <body>的根目录中使用。

您想要实现的目标称为条件渲染。在下面的示例中，＆＃34;编辑个人资料＆＃34;如果this.state.profileBelongsToUser为true，则会呈现按钮。否则它不会在DOM中呈现。您将不得不获取一些数据来决定该布尔标志的值。

class Profile extends React.Component {
  constructor(props) {
    super(props);
    // Initialize / set state probably by fetching some data.
    this.state = {
      profileBelongsToUser: false
    };
  }

  render() {
    return (
      <div>
        <div>
          <h1>Profile page</h1>
          <p>Name: John Doe</p>
          {this.state.profileBelongsToUser ? <button>Edit profile</button> : null}
        </div>
      </div>
    )
  }
}

如何禁用某些路由组件才能显示？

1 个答案: