React_antd_Comment(评论)_typescript

嵌套评论

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;