나는 사용자를 관리자와 일반 사용자로 분류 한 웹 사이트를 만들고 있습니다.표시 할 라우팅 구성 요소를 어떻게 비활성화 할 수 있습니까?
일부 라우팅 구성 요소는 인증 된 사용자가 아닌 한 다른 사용자의 세부 정보보기처럼 표시하면 안됩니다.
또한 일반 사용자에게 표시되어야 할뿐만 아니라 일반 사용자가 액세스 할 수도 없습니다. 코드를 어디에 수정해야합니까? ReactDOM.render (.....) 또는 구성 요소 안에 있습니까?
구성 요소 안에서 수행해야합니다. ReactDOM.render은 React 구성 요소와 DOM 요소를 가져옵니다. React가 그 요소를 렌더링함으로써 DOM 요소의 내용을 제어하게하는 데 사용됩니다. 일반적으로 대부분의 웹 앱은 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>
)
}
}