2018-10-22 21:20:28 +08:00
|
|
|
---
|
|
|
|
order: 1
|
|
|
|
title:
|
2018-11-02 23:38:52 +08:00
|
|
|
zh-CN: 配合 List 组件
|
2018-10-29 22:05:42 +08:00
|
|
|
en-US: Usage with list
|
2018-10-22 21:20:28 +08:00
|
|
|
---
|
|
|
|
|
|
|
|
## zh-CN
|
|
|
|
|
2018-11-02 23:38:52 +08:00
|
|
|
配合 List 组件展现评论列表。
|
2018-10-22 21:20:28 +08:00
|
|
|
|
|
|
|
## en-US
|
|
|
|
|
2018-11-02 23:38:52 +08:00
|
|
|
Displaying a series of comments using the `antd` List Component.
|
2018-10-22 21:20:28 +08:00
|
|
|
|
2019-05-07 14:57:32 +08:00
|
|
|
```jsx
|
2018-10-31 20:10:42 +08:00
|
|
|
import { Comment, Tooltip, List } from 'antd';
|
2018-10-22 21:20:28 +08:00
|
|
|
import moment from 'moment';
|
|
|
|
|
|
|
|
const data = [
|
|
|
|
{
|
2019-08-02 18:19:06 +08:00
|
|
|
actions: [<span key="comment-list-reply-to-0">Reply to</span>],
|
2018-10-22 21:20:28 +08:00
|
|
|
author: 'Han Solo',
|
2021-10-14 12:09:07 +08:00
|
|
|
avatar: 'https://joeschmoe.io/api/v1/random',
|
2018-10-29 00:26:13 +08:00
|
|
|
content: (
|
2019-05-07 14:57:32 +08:00
|
|
|
<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>
|
2018-10-29 00:26:13 +08:00
|
|
|
),
|
2018-10-30 00:17:26 +08:00
|
|
|
datetime: (
|
2020-10-21 11:06:07 +08:00
|
|
|
<Tooltip title={moment().subtract(1, 'days').format('YYYY-MM-DD HH:mm:ss')}>
|
|
|
|
<span>{moment().subtract(1, 'days').fromNow()}</span>
|
2018-10-29 22:05:42 +08:00
|
|
|
</Tooltip>
|
|
|
|
),
|
2018-10-22 21:20:28 +08:00
|
|
|
},
|
|
|
|
{
|
2019-08-02 18:19:06 +08:00
|
|
|
actions: [<span key="comment-list-reply-to-0">Reply to</span>],
|
2018-10-29 22:05:42 +08:00
|
|
|
author: 'Han Solo',
|
2021-10-14 12:09:07 +08:00
|
|
|
avatar: 'https://joeschmoe.io/api/v1/random',
|
2018-10-29 00:26:13 +08:00
|
|
|
content: (
|
2019-05-07 14:57:32 +08:00
|
|
|
<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>
|
2018-10-29 00:26:13 +08:00
|
|
|
),
|
2018-10-30 00:17:26 +08:00
|
|
|
datetime: (
|
2020-10-21 11:06:07 +08:00
|
|
|
<Tooltip title={moment().subtract(2, 'days').format('YYYY-MM-DD HH:mm:ss')}>
|
|
|
|
<span>{moment().subtract(2, 'days').fromNow()}</span>
|
2018-10-29 22:05:42 +08:00
|
|
|
</Tooltip>
|
|
|
|
),
|
2018-10-22 21:20:28 +08:00
|
|
|
},
|
|
|
|
];
|
|
|
|
|
|
|
|
ReactDOM.render(
|
|
|
|
<List
|
|
|
|
className="comment-list"
|
|
|
|
header={`${data.length} replies`}
|
|
|
|
itemLayout="horizontal"
|
|
|
|
dataSource={data}
|
|
|
|
renderItem={item => (
|
2019-05-06 12:04:39 +08:00
|
|
|
<li>
|
|
|
|
<Comment
|
|
|
|
actions={item.actions}
|
|
|
|
author={item.author}
|
|
|
|
avatar={item.avatar}
|
|
|
|
content={item.content}
|
|
|
|
datetime={item.datetime}
|
|
|
|
/>
|
|
|
|
</li>
|
2018-10-22 21:20:28 +08:00
|
|
|
)}
|
|
|
|
/>,
|
2018-12-01 00:24:16 +08:00
|
|
|
mountNode,
|
|
|
|
);
|
2019-05-07 14:57:32 +08:00
|
|
|
```
|