0
我正在製作一個網站,將用戶分爲管理員和普通用戶。如何禁用某些路由組件以顯示?
某些路由組件不應該像其他用戶的詳細信息一樣顯示,除非他是經過身份驗證的用戶。
此外,它不僅應該顯示給普通用戶,也不能被普通用戶訪問。我應該在哪裏修改代碼ReactDOM.render(.....)或在組件內部?
我正在製作一個網站,將用戶分爲管理員和普通用戶。如何禁用某些路由組件以顯示?
某些路由組件不應該像其他用戶的詳細信息一樣顯示,除非他是經過身份驗證的用戶。
此外,它不僅應該顯示給普通用戶,也不能被普通用戶訪問。我應該在哪裏修改代碼ReactDOM.render(.....)或在組件內部?
你應該在組件內部做到這一點。 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>
)
}
}