嵌套评论

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;