mirror of
https://github.com/ant-design/ant-design.git
synced 2024-12-05 17:59:57 +08:00
2.1 KiB
2.1 KiB
order | title | ||||
---|---|---|---|---|---|
0 |
|
zh-CN
一个基本的评论组件,带有作者、头像、时间和操作。
en-US
A basic comment with author, avatar, time and actions.
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);