mirror of
https://github.com/ant-design/ant-design.git
synced 2024-12-06 02:15:35 +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
2.2 KiB
2.2 KiB
order | title | ||||
---|---|---|---|---|---|
0 |
|
zh-CN
一个基本的评论组件,带有作者、头像、时间和操作。
en-US
A basic comment with author, avatar, time and actions.
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);
/* tile uploaded pictures */
.comment-action {
padding-left: 8px;
cursor: 'auto';
}
[class*='-col-rtl'] .comment-action {
padding-right: 8px;
padding-left: 0;
}