ReactのWrapperComponentについて

Question

//wrapper component
import { useState, useEffect } from "react";
import { NextPage } from "next";
import Layout from "layout/app";
import Router from "next/router";
import { isLogin } from "service/isLogin";

export const checkAuth = (Component: NextPage) => {
  return (props) => {
    return (
      <Component {...props}/>
    );
  }
};

//component
const LoginPage: NextPage = () => {
  return (
   <div>HelloWorld</div>
   )
}
export default checkAuth(LoginPage);

ReactAppでログインチェックを行いたく思い、WrapperComponentを作成したのですが、上記のような書き方になりました。
ここで下記のところがいまいち理解できません。

• なぜreturnが2つじゃないと動かないのか?
• propsの正体(console.logしても空)

よろしくお願いします。

Comments

[maisumakun]

withAuthの定義がないようです。あと、checkAuthはどこでどのように使われるものでしょうか？

[2_34_koki]

ありがとうございます。修正しました

Answer 1

なぜreturnが2つじゃないと動かないのか?

これは、HOC（Higher Order Component）と呼ばれる仕組みです。「関数コンポーネントを返す関数」なので、関数コンポーネント内のreturnと、外側のHOC自体のreturnが存在します。

propsの正体(console.logしても空)

渡された引数をそのまま渡しています。生成したコンポーネントを呼び出す際にpropsに何も渡さなければ、当然空です。