如何禁用某些路由组件显示？答案

【问题标题】：How can I disable some routing components to display?如何禁用某些路由组件显示？
【发布时间】：2016-09-26 02:40:21
【问题描述】：

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

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

此外，它不仅应该显示给普通用户，而且普通用户也无法访问。我应该在哪里修改代码 ReactDOM.render(.....) 或在组件内部？

【问题讨论】：

标签： reactjs

【解决方案1】：

您应该在组件内部执行此操作。 ReactDOM.render 接受一个 React 组件和一个 DOM 元素。它用于让 React 通过在其中渲染该组件来控制该 DOM 元素的内容。通常，大多数 Web 应用程序只有一个 ReactDOM.render，它用于 HTML 的根目录 <body>。

您想要实现的称为条件渲染。在下面的示例中，如果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>
    )
  }
}

【讨论】：