如何将Header组件中items数组初始化移至外部并传入sessionData？

完全可以把items数组的初始化逻辑抽离到组件外部，只需要把生成菜单项的逻辑封装成一个接收sessionData作为参数的函数即可。这样既能保持组件内部简洁，又能灵活传入所需的会话数据。

修改后的完整代码： #

import React, { useState } from "react";
import { signIn, signOut, useSession } from "next-auth/react";
import Link from "next/link";
import { Menu } from "antd";
import type { MenuProps } from "antd";
import type { Session } from "next-auth";
import { UserOutlined, UserAddOutlined } from "@ant-design/icons";

// 抽离到组件外部的菜单项生成函数
const generateMenuItems = (sessionData: Session | null): MenuProps["items"] => [
  {
    label: (
      <div className="float-right">
        <Link href="/register">Register</Link>
      </div>
    ),
    key: "register",
    icon: <UserAddOutlined />,
  },
  {
    label: (
      <button
        className="rounded-full bg-white/10 px-10 py-3 font-semibold text-white no-underline transition hover:bg-white/20"
        onClick={sessionData ? () => void signOut() : () => void signIn()}
      >
        {sessionData ? "Sign out" : "Sign in"}
      </button>
    ),
    key: "login",
    icon: <UserOutlined />,
  },
];

const Header: React.FC = () => {
  const [current, setCurrent] = useState("register");
  const { data: sessionData, status } = useSession();

  // 调用外部函数生成菜单项
  const items = generateMenuItems(sessionData);

  const onClick: MenuProps["onClick"] = (e) => {
    setCurrent(e.key);
  };

  return (
    <div className="flex items-center">
      <Menu
        onClick={onClick}
        selectedKeys={[current]}
        mode="horizontal"
        items={items}
        className="mr-4 flex-shrink-0"
      />
    </div>
  );
};

export default Header;

补充说明： #

• 这里给sessionData加上了next-auth官方的Session | null类型，让TypeScript类型检查更严谨，如果你不需要严格类型约束，也可以换成any。
• 这种抽离方式不仅简化了组件内部代码，后续如果其他组件需要复用相同的菜单项逻辑，直接调用generateMenuItems函数即可，提升了代码复用性。

内容的提问来源于stack exchange，提问作者John John