ant-design/components/comment/demo/list.md
二货爱吃白萝卜 c3ebf4b9b4
chore: Use new Argos CLI ()
* chore(ci): use new argos cli

* chore: fix lint

* chore(ci): simplify ui-upload process

* chore(ci): fix argos-upload permission

* chore(ci): use cp instead mv

* chore(ci): fix fetch-depth

* chore: force failed

* chore: clean up

* test: update demo snapshot

Co-authored-by: Greg Bergé <berge.greg@gmail.com>
2022-09-09 18:21:50 +08:00

1.7 KiB

order title
1
zh-CN en-US
配合 List 组件 Usage with list

zh-CN

配合 List 组件展现评论列表。

en-US

Displaying a series of comments using the antd List Component.

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

const data = [
  {
    actions: [<span key="comment-list-reply-to-0">Reply to</span>],
    author: 'Han Solo',
    avatar: 'https://joeschmoe.io/api/v1/random',
    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="2016-11-22 11:22:33">
        <span>8 hours ago</span>
      </Tooltip>
    ),
  },
  {
    actions: [<span key="comment-list-reply-to-0">Reply to</span>],
    author: 'Han Solo',
    avatar: 'https://joeschmoe.io/api/v1/random',
    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="2016-11-22 10:22:33">
        <span>9 hours ago</span>
      </Tooltip>
    ),
  },
];

const App: React.FC = () => (
  <List
    className="comment-list"
    header={`${data.length} replies`}
    itemLayout="horizontal"
    dataSource={data}
    renderItem={item => (
      <li>
        <Comment
          actions={item.actions}
          author={item.author}
          avatar={item.avatar}
          content={item.content}
          datetime={item.datetime}
        />
      </li>
    )}
  />
);

export default App;