mirror of
https://gitee.com/ant-design/ant-design.git
synced 2024-12-04 21:18:01 +08:00
99 lines
2.1 KiB
Markdown
99 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);
|
|
```
|