ReactJS UI Ant Design 评论组件

Ant Design 是一套企业级的 UI 设计语言和 React UI 组件库。它提供了许多常用的组件，支持定制化主题，并且有着完善的文档和社区支持。

在 Ant Design 中，评论组件是其中一个非常实用的组件。它可以方便地实现评论功能，还支持点赞、回复等操作。

安装

使用 npm 安装：

npm install antd --save

使用方法

在组件中引入 Comment 组件即可使用：

import React from 'react';
import { Comment, Avatar, Tooltip } from 'antd';
import moment from 'moment';

const ExampleComment = ({ children }) => (
  <Comment
    actions={[<span key="comment-nested-reply-to">Reply to</span>]}
    author={<a>Han Solo</a>}
    avatar={
      <Avatar
        src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"
        alt="Han Solo"
      />
    }
    content={
      <p>
        We supply a series of design principles, practical patterns and high quality design
        resources (Sketch and Axure), to help people create their product prototypes beautifully
        and efficiently.
      </p>
    }
    datetime={
      <Tooltip title={moment().format('YYYY-MM-DD HH:mm:ss')}>
        <span>{moment().fromNow()}</span>
      </Tooltip>
    }
  >
    {children}
  </Comment>
);

属性说明

Comment 组件有很多可供定制的属性，下面介绍一些常用的属性：

• actions：Comment 的操作，类型为一个 React Element 数组；
• author：作者，类型为一个 React Element；
• avatar：头像，类型为一个 React Element；
• content：内容，类型为一个 React Element；
• datetime：时间，类型为一个 React Element；
• children：子元素。

更多属性可以查看 Ant Design 官方文档。

结语

Ant Design 提供了许多实用且优美的 UI 组件，评论组件是其中的一个代表。使用它可以很方便地为我们的应用程序提供评论、点赞、回复等功能，让我们的应用程序更加互动友好。