前提回顾:
在本文中,我们将深入探讨如何使用 React、Material-UI 和 React Query 创建一个现代化的用户资料页面。这个页面将展示用户的头像、基本信息、状态面板以及活动热图。让我们逐步解析这个过程,并探讨每个部分的实现细节。
技术栈简介
-
React: 一个用于构建用户界面的 JavaScript 库。
-
Material-UI: 一个受 Google Material Design 规范启发的 React 组件库。
-
React Query: 一个用于数据获取和状态管理的库,简化了与服务器通信的流程。
项目结构
为了方便管理,我们将代码分成多个组件。主要组件包括 Profile
、HistoryInfoPanel
、StatusPanel
和 DayHeatmap
。我们会专注于 Profile
组件,它是整个页面的核心。
代码解析
创建 Profile
组件
Profile
组件是整个页面的核心,负责展示用户的头像、基本信息和其他子组件。以下是 Profile
组件的实现:
获取查询参数和用户数据
export default function Profile() {
const [params, setParams] = useSearchParams();
const { isLoading, isSuccess, data } = useQuery({
queryKey: [`${get_user_info}/${params.get("id") ?? localStorage.getItem("userId")} `],
queryFn: queryFn,
});
useSearchParams
: 这个钩子函数用于获取和设置 URL 查询参数。这里我们获取 id
参数。
useQuery
: 来自 React Query,用于执行异步数据请求。我们定义了 queryKey
和 queryFn
:
-
queryKey
: 是请求的唯一键值,用于缓存和数据匹配。这里我们使用用户信息的 URL 以及用户 ID 作为键值。 -
queryFn
: 是实际执行请求的函数,负责从服务器获取数据。
子组件:StatusPanel
和 DayHeatmap
在 Profile
组件中,我们还嵌入了 StatusPanel
和 DayHeatmap
子组件:
<Grid item xs={12}>
<Container sx={{ marginTop: 2, marginBottom: 2 }}>
<StatusPanel />
</Container>
</Grid>
<Grid item xs={12}>
<Container
sx={{
display: "flex",
flexDirection: "column",
alignItems: "center",
marginTop: 3,
}}
>
<DayHeatmap type="user" id={localStorage.getItem("userId")} />
</Container>
</Grid>
StatusPanel
: 这是一个自定义组件,显示用户的状态信息。
DayHeatmap
: 显示用户活动的热图。这里传递了 type
和 id
属性,id
从 localStorage
中获取。
整体渲染效果
总结
通过结合 React、Material-UI 和 React Query,我们可以轻松创建一个功能丰富、外观现代的用户资料页面。这个页面不仅展示了用户的基本信息,还集成了多个子组件,提供了全面的用户数据展示和交互功能。通过合理的组件划分和数据管理,我们确保了代码的可维护性和扩展性。