2016-09-26 63 views
0

我正在製作一個網站,將用戶分爲管理員和普通用戶。如何禁用某些路由組件以顯示?

某些路由組件不應該像其他用戶的詳細信息一樣顯示,除非他是經過身份驗證的用戶。

此外,它不僅應該顯示給普通用戶,也不能被普通用戶訪問。我應該在哪裏修改代碼ReactDOM.render(.....)或在組件內部?

回答

0

你應該在組件內部做到這一點。 ReactDOM.render需要一個React組件和一個DOM元素。它用於讓React通過呈現該組件中的內容來控制該DOM元素的內容。通常,大多數Web應用程序只有一個ReactDOM.render,它在HTML <body>的根部使用。

你想實現的是所謂的條件渲染。在下面的示例中,如果this.state.profileBelongsToUsertrue,則將顯示「編輯配置文件」按鈕。否則它不會在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> 
    ) 
    } 
}