mirror of
https://github.com/ant-design/ant-design.git
synced 2024-12-22 22:48:29 +08:00
101 lines
2.1 KiB
Markdown
101 lines
2.1 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 {
|
|
Comment, Icon, Tooltip, Avatar,
|
|
} from 'antd';
|
|
import moment from 'moment';
|
|
|
|
class App extends React.Component {
|
|
state = {
|
|
likes: 0,
|
|
dislikes: 0,
|
|
action: null,
|
|
}
|
|
|
|
like = () => {
|
|
this.setState({
|
|
likes: 1,
|
|
dislikes: 0,
|
|
action: 'liked',
|
|
});
|
|
}
|
|
|
|
dislike = () => {
|
|
this.setState({
|
|
likes: 0,
|
|
dislikes: 1,
|
|
action: 'disliked',
|
|
});
|
|
}
|
|
|
|
render() {
|
|
const { likes, dislikes, action } = this.state;
|
|
|
|
const actions = [
|
|
<span>
|
|
<Tooltip title="Like">
|
|
<Icon
|
|
type="like"
|
|
theme={action === 'liked' ? 'filled' : 'outlined'}
|
|
onClick={this.like}
|
|
/>
|
|
</Tooltip>
|
|
<span style={{ paddingLeft: 8, cursor: 'auto' }}>
|
|
{likes}
|
|
</span>
|
|
</span>,
|
|
<span>
|
|
<Tooltip title="Dislike">
|
|
<Icon
|
|
type="dislike"
|
|
theme={action === 'disliked' ? 'filled' : 'outlined'}
|
|
onClick={this.dislike}
|
|
/>
|
|
</Tooltip>
|
|
<span style={{ paddingLeft: 8, cursor: 'auto' }}>
|
|
{dislikes}
|
|
</span>
|
|
</span>,
|
|
<span>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(<App />, mountNode);
|
|
````
|