嵌套评论
actions:在评论项项展示操作项列表;
author:显示为作者的名字;
avatar:显示评论头像元素,常为antdAvatar或者src;
children:嵌套子项;
content:评论内容;
datetime:显示时间;
- index.tsx
import React, { Component } from 'react';
import { Comment, Avatar } from 'antd';
interface ICode {
children?: any
onClickComment: any
}
const ExampleComment: React.FC<ICode> = (code) => {
const { children, onClickComment } = code;
return (
<Comment
actions={[<span key="comment-nested-reply-to" onClick={onClickComment}>Reply to</span>]}
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).
</p>
}
>
{children}
</Comment>
);
}
export class Index extends Component {
render() {
return (
<div>
<ExampleComment onClickComment = { this.exampleCommentClickedHandler }>
<ExampleComment onClickComment = { this.exampleCommentClickedHandler }>
</ExampleComment>
</ExampleComment>,
</div>
)
}
exampleCommentClickedHandler = () => {
console.log("**********")
}
}
export default Index;
- 回复框
import React, { Component } from 'react';
import { Comment, Avatar, Form, Button, List, Input } from 'antd';
import moment from 'moment';
const { TextArea } = Input;
/**
* 评论: 回复框
*/
interface ICode {
submitting?: boolean,
value?: string
}
interface IState extends ICode {
comments: [],
}
interface IEditor extends ICode {
onChangeComment: any,
onClickComment: any,
}
/** 表单 */
const Editor: React.FC<IEditor> = (props) => {
const { onChangeComment, onClickComment, value, submitting } = props;
return (
<>
<Form.Item>
<TextArea rows={4} onChange={onChangeComment} value={value} />
</Form.Item>
<Form.Item>
<Button htmlType="submit" loading={submitting} onClick={onClickComment} type="primary"> Add Comment </Button>
</Form.Item>
</>
);
}
/** 列表 */
const CommentList: React.FC<IState> = (state) => {
const { comments } = state;
return (
<List
dataSource={comments}
header={`${comments.length} ${comments.length > 1 ? 'replies' : 'reply'}`}
itemLayout="horizontal"
renderItem={props => <Comment {...props} />}
/>
);
}
class Index extends Component<IState> {
state: IState = {
comments: [],
submitting: false,
value: '',
}
render() {
const { comments, submitting, value } = this.state;
return (
<>
{
comments.length > 0 && <CommentList comments={comments} />
}
<Comment
avatar={
<Avatar src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"/>
}
content={
<Editor
onChangeComment={this.editorCommentChangedHandler}
onClickComment={this.editorCommentClickedHandler}
submitting={submitting}
value={value} />
}
/>
</>
)
}
editorCommentChangedHandler = (e: any) => {
this.setState({
value: e.target.value,
});
};
editorCommentClickedHandler = () => {
if (!this.state.value) {
return;
}
this.setState({
submitting: true,
});
/** 定时器 */
setTimeout(() => {
this.setState({
submitting: false,
value: '',
comments: [
{
author: 'Tao Solo',
avatar: 'https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png',
content: <p>{this.state.value}</p>,
datetime: moment().fromNow(),
},
...this.state.comments,//组合
],
});
}, 1000);
}
}
export default Index;