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 => (
      <Comment
        actions={item.actions}
        author={item.author}
        avatar={item.avatar}
        time={item.time}
        tooltipTime={item.tooltipTime}
      >
        {item.children}
      </Comment>
    )}
  />,
  mountNode);