使用React打造精简版掘金之点赞、收藏、分享功能实现

引言

在上一篇文章中，我们已经完成了精简版掘金的骨架，这篇文章，我们将对文章点赞数量的显示，评论数量的显示，收藏按钮，分享链接进行实现。

点赞数量显示

点赞数量显示需要引入ant-design组件库中的Avatar,Badge组件。代码如下：

import { Avatar, Badge } from 'antd';

const ArticleLike = () => {
  return (
    <div className="article-like">
      <Badge count={10} offset={[5, 0]}>
        <Avatar shape="square" size={32} icon="heart" />
      </Badge>
    </div>
  );
};

export default ArticleLike;

评论数量显示

评论数量的显示，使用的是Badge组件的dot特性。代码如下：

import { Badge } from 'antd';

const ArticleComment = () => {
  return (
    <div className="article-comment">
      <Badge dot>
        <span>评论</span>
      </Badge>
    </div>
  );
};

export default ArticleComment;

收藏按钮

收藏按钮，直接使用Icon组件即可。代码如下：

import { Icon } from 'antd';

const ArticleCollect = () => {
  return (
    <div className="article-collect">
      <Icon type="star" />
    </div>
  );
};

export default ArticleCollect;

分享链接

分享链接，同样可以使用Icon组件。代码如下：

import { Icon } from 'antd';

const ArticleShare = () => {
  return (
    <div className="article-share">
      <Icon type="share-alt" />
    </div>
  );
};

export default ArticleShare;

布局

点赞、评论、收藏、分享四个组件的布局，使用的是Flex布局。代码如下：

.article-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.article-info > div {
  margin-right: 20px;
}

效果

最终的效果如下图所示：

[图片]

结语

本篇文章中，我们完成了点赞、评论、收藏、分享功能的实现。下一篇文章中，我们将继续完善精简版掘金的其他功能。敬请期待！