React
高次コンポーネント
サーチ…
前書き
高次コンポーネント(略して「HOC」)は、再利用可能なコードを使用してコンポーネントを強化するために使用される反応アプリケーションの設計パターンです。既存のコンポーネントクラスに機能や動作を追加することができます。
HOCは、引数としてコンポーネントを受け入れ、拡張された機能を持つ新しいコンポーネントを返す純粋な javascript関数です。
備考
HOCは、サードパーティのライブラリでよく使用されています。 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