mirror of
https://github.com/ant-design/ant-design.git
synced 2024-12-02 15:59:38 +08:00
b06e2567b6
* fix(comment): like and dislike number cursor style(#25437) * docs: modify like and dislike DOM order and onclick event binding * fix: key missing for actions array * fix: add test snapshot * fix: modify test snapshot
96 lines
2.2 KiB
Markdown
96 lines
2.2 KiB
Markdown
---
|
|
order: 0
|
|
title:
|
|
zh-CN: 基本评论
|
|
en-US: Basic comment
|
|
---
|
|
|
|
## zh-CN
|
|
|
|
一个基本的评论组件，带有作者、头像、时间和操作。
|
|
|
|
## en-US
|
|
|
|
A basic comment with author, avatar, time and actions.
|
|
|
|
```jsx
|
|
import React, { createElement, useState } from 'react';
|
|
import { Comment, Tooltip, Avatar } from 'antd';
|
|
import moment from 'moment';
|
|
import { DislikeOutlined, LikeOutlined, DislikeFilled, LikeFilled } from '@ant-design/icons';
|
|
|
|
const Demo = () => {
|
|
const [likes, setLikes] = useState(0);
|
|
const [dislikes, setDislikes] = useState(0);
|
|
const [action, setAction] = useState(null);
|
|
|
|
const like = () => {
|
|
setLikes(1);
|
|
setDislikes(0);
|
|
setAction('liked');
|
|
};
|
|
|
|
const dislike = () => {
|
|
setLikes(0);
|
|
setDislikes(1);
|
|
setAction('disliked');
|
|
};
|
|
|
|
const actions = [
|
|
<Tooltip key="comment-basic-like" title="Like">
|
|
<span onClick={like}>
|
|
{createElement(action === 'liked' ? LikeFilled : LikeOutlined)}
|
|
<span className="comment-action">{likes}</span>
|
|
</span>
|
|
</Tooltip>,
|
|
<Tooltip key="comment-basic-dislike" title="Dislike">
|
|
<span onClick={dislike}>
|
|
{React.createElement(action === 'disliked' ? DislikeFilled : DislikeOutlined)}
|
|
<span className="comment-action">{dislikes}</span>
|
|
</span>
|
|
</Tooltip>,
|
|
<span key="comment-basic-reply-to">Reply to</span>,
|
|
];
|
|
|
|
return (
|
|
<Comment
|
|
actions={actions}
|
|
author={<a>Han Solo</a>}
|
|
avatar={
|
|
<Avatar
|
|
src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"
|
|
alt="Han Solo"
|
|
/>
|
|
}
|
|
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().format('YYYY-MM-DD HH:mm:ss')}>
|
|
<span>{moment().fromNow()}</span>
|
|
</Tooltip>
|
|
}
|
|
/>
|
|
);
|
|
};
|
|
|
|
ReactDOM.render(<Demo />, mountNode);
|
|
```
|
|
|
|
```css
|
|
/* tile uploaded pictures */
|
|
.comment-action {
|
|
padding-left: 8px;
|
|
cursor: 'auto';
|
|
}
|
|
|
|
[class*='-col-rtl'] .comment-action {
|
|
padding-right: 8px;
|
|
padding-left: 0;
|
|
}
|
|
```
|