問題一覧に戻る
上級高度なパターンと型
問題89: 高階コンポーネント(HOC)

追加機能でコンポーネントをラップするHOCパターンを学びます。HOCはコンポーネントを受け取り、拡張されたバージョンを返す関数です。認証、ロギング、データフェッチングなどの一般的な用途があります。モダンReactではフックが好まれますが、HOCの理解はレガシーコードと特定のパターンに役立ちます。

import React from 'react';

{/* HOC関数の定義 */}
function withAuth() {
  return function AuthComponent(props) {
    const isAuth = true; // Simulated auth
    
    if (!isAuth) {
      return <div>Please login</div>;
    }
    
    {/* ラップされたコンポーネントをレンダー */}
    return < {...} />;
  };
}

{/* 元のコンポーネント */}
function Profile({ name }) {
  return <h1>Welcome, {name}!</h1>;
}

{/* HOCで拡張 */}
const ProtectedProfile = (Profile);

function App() {
  return < name="John" />;
}

export default App;