英文:
Extracting initialization of data out the component
问题
以下是您要翻译的代码部分：
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 { UserOutlined, UserAddOutlined } from "@ant-design/icons";
const Header: React.FC = () => {
const [current, setCurrent] = useState("register");
const { data: sessionData, status } = useSession();
const items: 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 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;
希望这有助于您的需求。如果您有任何其他问题，只需提出。
英文:
Not sure if I am over complicating the code but I was wondering if there is a way to extract initialization of the items array outside of the Header component and still be able to pass 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 { UserOutlined, UserAddOutlined } from "@ant-design/icons";
const Header: React.FC = () => {
const [current, setCurrent] = useState("register");
const { data: sessionData, status } = useSession();
const items: 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 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;
答案1
得分: 1
通过函数中的参数：
function getMenuItems(sessionData: TypeOfSessionDataHere): MenuProps["items"] {
return [
// 在这里创建项目
]
}
---
尽管如此，我对这次重构的价值产生了质疑。您的组件非常简单，实际内容是重点。将其放在不同的文件或函数中，并要求您使用中间类型似乎有些繁琐。
我会将其内联处理。
<Menu
items={[
//... 在这里内联内容
]}
/>
---
或者，如果您觉得这样太繁琐，您可以为每个项目创建一个组件：
<Menu
items={[
{
label: <RegisterLabel sessionData={sessionData} />,
key: "register",
icon: <UserAddOutlined />,
}, {
label: <LoginLabel sessionData={sessionData} />,
key: "login",
icon: <UserOutlined />,
}
]}
/>
---
这里有很多选择。
英文:
By parameters in a function:
function getMenuItems(sessionData: TypeOfSessionDataHere): MenuProps["items"] {
return [
// create items here
]
}
Although, I question the value of this refactor. Your component is very simple, and the items are the actual content that matters here. Putting this in a different file or function, and requiring you use intermediate types seems cumborsome.
I'd just make that inline.
<Menu
items={[
//... just inline content here
]}
/>
Or you could make a component for each item if you feel that's cumbersome:
<Menu
items={[
{
label: <RegisterLabel sessionData={sessionData} />,
key: "register",
icon: <UserAddOutlined />,
}, {
label: <LoginLabel sessionData={sessionData} />,
key: "login",
icon: <UserOutlined />,
}
]}
/>
Lots of choices here.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论