ant-design/components/comment/demo/list.md

order	title
1	zh-CN en-US 用法用名单 Usage With List

zh-CN

基本评论使用antd List组件来呈现一系列注释。

en-US

A basic comment used with antd List component to render a series of comments.

import { Comment, Icon, Tooltip, List } from 'antd';
import moment from 'moment';

const data = [
  {
    author: 'Han Solo',
    avatar: 'https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png',
    time: moment().subtract(1, 'days').fromNow(),
    tooltipTime: moment().subtract(1, 'days').format('YYYY-MM-DD HH:mm:ss'),
      actions: [
      <span>Reply to</span>
    ],
    children: (
      <p>Nisl nisi scelerisque eu ultrices vitae auctor eu augue. Nulla at volutpat diam ut venenatis tellus in metus vulputate.</p>
    )
  },
  {
    author: 'Stormtrooper',
    avatar: 'https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png',
    time: moment().subtract(2, 'days').fromNow(),
    tooltipTime: moment().subtract(1, 'days').format('YYYY-MM-DD HH:mm:ss'),
    actions: [
      <span>Reply to</span>
    ],
    children: (
      <p>Sed turpis tincidunt id aliquet risus feugiat in ante metus. Faucibus nisl tincidunt eget nullam non.</p>
    )
  },
];

ReactDOM.render(
  <List
    className="comment-list"
    header={`${data.length} replies`}
    itemLayout="horizontal"
    dataSource={data}
    renderItem={item => (
      <List.Item>
        <Comment
          actions={item.actions}
          author={item.author}
          avatar={item.avatar}
          time={item.time}
          tooltipTime={item.tooltipTime}
        >
          {item.children}
        </Comment>
      </List.Item>
    )}
  />,
  mountNode);