代码应用场景

本代码用于构建一个个人资料卡片，展示用户的基本信息、社交媒体统计数据以及最新的评论。它可以应用于社交媒体平台、个人博客或任何需要以交互方式展示个人信息的网站。

代码基本功能

该代码提供以下功能：

• 展示用户的头像、姓名、简介和社交媒体链接。
• 显示用户的帖子、关注者和关注人数。
• 列出用户最近的评论，每条评论包括一张图片、标题、内容和发布时间。
• 评论卡片可以悬停，以查看更多详细信息。

功能实现步骤及关键代码分析

1. 导入必要的库

import { useState, useEffect } from "react";
import { Avatar, Button, Card, Col, Row } from "antd";
import { PlusOutlined } from "@ant-design/icons";

2. 定义状态变量

const [userData, setUserData] = useState({});
const [latestReviews, setLatestReviews] = useState([]);

3. 获取用户数据和评论

useEffect(() => {
  // 假设这是从服务器获取数据的异步函数
  const fetchUserData = async () => {
    const data = await getApiData("user");
    setUserData(data);
  };

  // 假设这是从服务器获取数据的异步函数
  const fetchLatestReviews = async () => {
    const data = await getApiData("reviews");
    setLatestReviews(data);
  };

  fetchUserData();
  fetchLatestReviews();
}, []);

4. 渲染个人资料卡片

<Card
  className="bg-gray-100"
  style={{ borderRadius: "10px" }}
>
  <div className="flex justify-between items-center border-b border-gray-200 px-4 py-3">
    <div className="flex items-center">
      <Avatar
        className="w-10 h-10 rounded-full mr-3"
        src={userData.avatar}
        alt="avatar"
      />
      <div>
        <h2 className="font-semibold text-gray-700 text-lg">{userData.name}</h2>
        <p className="text-sm text-gray-500">{userData.bio}</p>
      </div>
    </div>
    <div>
      <Button type="primary" className="mr-2">
        Edit Profile
      </Button>
      <Button type="primary" icon={<PlusOutlined />}></Button>
    </div>
  </div>
  <div className="flex justify-between items-center border-b border-gray-200 px-4 py-3">
    <div className="flex items-center">
      <div className="text-lg font-semibold text-gray-700 mr-3">
        {userData.posts}
      </div>
      <div>Posts</div>
    </div>
    <div className="flex items-center">
      <div className="text-lg font-semibold text-gray-700 mr-3">
        {userData.followers}
      </div>
      <div>Followers</div>
    </div>
    <div className="flex items-center">
      <div className="text-lg font-semibold text-gray-700 mr-3">
        {userData.following}
      </div>
      <div>Following</div>
    </div>
  </div>
  <div className="flex justify-between items-center px-4 py-3">
    <div className="text-lg font-semibold text-gray-700">Latest Reviews</div>
    <div><a-button type="link">See All</a-button></div>
  </div>
  <div className="grid grid-cols-3 gap-4 px-4 pb-4">
    {latestReviews.map((review) => (
      <Card
        hoverable
        className="cursor-pointer"
        style={{
          width: "100%",
          height: "100%",
          borderRadius: "10px",
        }}
        key={review.id}
      >
        <div className="flex justify-center items-center">
          <img
            className="w-full h-full object-cover rounded-lg"
            src={review.image}
            alt={review.title}
          />
        </div>
        <div className="p-4">
          <div className="flex justify-between items-center">
            <div className="text-sm font-semibold text-gray-700">
              {review.title}
            </div>
            <div className="text-sm text-gray-500">{review.time}</div>
          </div>
          <div className="mt-2">
            <p className="text-sm text-gray-500">{review.content}</p>
          </div>
        </div>
      </Card>
    ))}
  </div>
</Card>

5. 评论卡片悬停效果

<Card
  hoverable
  className="cursor-pointer"
  style={{
    width: "100%",
    height: "100%",
    borderRadius: "10px",
  }}
  onMouseEnter={() => {
    // 显示更多评论详细信息
  }}
  onMouseLeave={() => {
    // 隐藏更多评论详细信息
  }}
>
  ...
</Card>

总结与展望

开发这段代码过程中的经验与收获

• 了解了如何使用 React 和 Ant Design 来构建交互式卡片。
• 学会了如何从服务器获取数据并将其呈现到 UI 中。
• 提高了对悬停事件和状态管理的理解。

未来该卡片功能的拓展与优化

• 添加评论点赞和评论功能。
• 根据用户喜好个性化评论显示。
• 整合图像库或允许用户上传自己的图片。