React
고차원 구성 요소
수색…
소개
고수준 구성 요소 ( "HOC")는 재사용 가능한 코드로 구성 요소를 향상시키는 데 사용되는 반응 응용 프로그램 디자인 패턴입니다. 이를 통해 기존 구성 요소 클래스에 기능 및 동작을 추가 할 수 있습니다.
HOC는 인수로서 구성 요소를 승인하고 확장 된 기능으로 새 구성 요소를 리턴하는 순수한 javascript 함수입니다.
비고
HOC는 제 3 자 라이브러리에서 자주 사용됩니다. Redux 연결 기능과 같은.
간단한 고차원 구성 요소
구성 요소가 마운트 될 때마다 console.log를 원한다고 가정 해 봅시다.
hocLogger.js
export default function hocLogger(Component) {
return class extends React.Component {
componentDidMount() {
console.log('Hey, we are mounted!');
}
render() {
return <Component {...this.props} />;
}
}
}
코드에서 다음 HOC를 사용하십시오.
MyLoggedComponent.js
import React from "react";
import {hocLogger} from "./hocLogger";
export class MyLoggedComponent extends React.Component {
render() {
return (
<div>
This component get's logged to console on each mount.
</div>
);
}
}
// Now wrap MyLoggedComponent with the hocLogger function
export default hocLogger(MyLoggedComponent);
인증을 확인하는 고차원 구성 요소
사용자가 로그인 한 경우에만 표시해야하는 구성 요소가 있다고 가정 해 보겠습니다.
그래서 각 render ()에서 인증을 확인하는 HOC를 생성합니다.
AuthenticatedComponent.js
import React from "react";
export function requireAuthentication(Component) {
return class AuthenticatedComponent extends React.Component {
/**
* Check if the user is authenticated, this.props.isAuthenticated
* has to be set from your application logic (or use react-redux to retrieve it from global state).
*/
isAuthenticated() {
return this.props.isAuthenticated;
}
/**
* Render
*/
render() {
const loginErrorMessage = (
<div>
Please <a href="/login">login</a> in order to view this part of the application.
</div>
);
return (
<div>
{ this.isAuthenticated === true ? <Component {...this.props} /> : loginErrorMessage }
</div>
);
}
};
}
export default requireAuthentication;
그런 다음 익명 사용자에게 숨겨져 있어야하는 구성 요소에서이 고차원 구성 요소를 사용합니다.
MyPrivateComponent.js
import React from "react";
import {requireAuthentication} from "./AuthenticatedComponent";
export class MyPrivateComponent extends React.Component {
/**
* Render
*/
render() {
return (
<div>
My secret search, that is only viewable by authenticated users.
</div>
);
}
}
// Now wrap MyPrivateComponent with the requireAuthentication function
export default requireAuthentication(MyPrivateComponent);
Modified text is an extract of the original Stack Overflow Documentation
아래 라이선스 CC BY-SA 3.0
와 제휴하지 않음 Stack Overflow