mirror of
https://github.com/ant-design/ant-design.git
synced 2024-12-06 02:15:35 +08:00
2.1 KiB
2.1 KiB
order | title | ||||
---|---|---|---|---|---|
1 |
|
zh-CN
配合 List 组件展现评论列表。
en-US
Displaying a series of comments using the antd
List Component.
import { Comment, Tooltip, List } from 'antd';
import moment from 'moment';
const data = [
{
actions: [<span key="comment-list-reply-to-0">Reply to</span>],
author: 'Han Solo',
avatar: 'https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png',
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()
.subtract(1, 'days')
.format('YYYY-MM-DD HH:mm:ss')}
>
<span>
{moment()
.subtract(1, 'days')
.fromNow()}
</span>
</Tooltip>
),
},
{
actions: [<span key="comment-list-reply-to-0">Reply to</span>],
author: 'Han Solo',
avatar: 'https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png',
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()
.subtract(2, 'days')
.format('YYYY-MM-DD HH:mm:ss')}
>
<span>
{moment()
.subtract(2, 'days')
.fromNow()}
</span>
</Tooltip>
),
},
];
ReactDOM.render(
<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>
)}
/>,
mountNode,
);