comment/src/components/CommentBox/index.js

import React, { Component } from "react";
import PropTypes from "prop-types";
import { Icon } from "antd";
import Comment from "../../Comment";
import ContentItem from "./../ContentItem";
import "./index.css";

class CommentBox extends Component {
  constructor(props) {
    super(props);
    this.state = {
      showReply: true,
      page: 1
    };

    this.handleToggleReply = this.handleToggleReply.bind(this);
    this.handleGetMoreReply = this.handleGetMoreReply.bind(this);
    this.renderReplies = this.renderReplies.bind(this);
  }

  /**
   * 切换是否显示回复列表
   */
  handleToggleReply() {
    this.setState({ showReply: !this.state.showReply });
  }

  /**
   * 获取更多评论
   * @param {string} commentId comment id
   */
  handleGetMoreReply(commentId) {
    // 从第一页开始获取评论
    const { page } = this.state;
    this.props.app.sGetReply({ commentId, page });
    this.setState({ page: page + 1 });
  }

  /**
   * 渲染回复 DOM
   * @param {array} replies 回复列表
   * @param {number} replies 回复的数量
   * @param {boolean} isNoMoreReply 是否没有更多回复
   */
  renderReplies(replies, replyCount, isNoMoreReply) {
    const { commentId, isMobile } = this.props;
    const { showReply } = this.state;
    if (showReply && replies && replies.length) {
      const len = replies.length;
      return (
        <div style={{ marginLeft: 50 }}>
          {replies.map((item, index) => {
            if (index === len - 1) {
              return [
                <ContentItem
                  commentId={commentId}
                  isMobile={isMobile}
                  replyId={item.id}
                  key={item.id}
                  content={item}
                  action="replyToReply" // 回复的回复
                />,
                <div className="comment-more-box" key="show_more_button">
                  {!isNoMoreReply && replyCount !== len && (
                    <span
                      className="comment-show-more"
                      onClick={() => this.handleGetMoreReply(commentId)}
                    >
                      查看更多回复
                    </span>
                  )}

                  <a
                    style={{ float: "right" }}
                    onClick={this.handleToggleReply}
                  >
                    <Icon type="up" /> 收起回复
                  </a>
                </div>
              ];
            }
            return (
              <ContentItem
                isMobile={isMobile}
                commentId={commentId}
                replyId={item.id}
                key={item.id}
                content={item}
                action="replyToReply" // 评论的回复
              />
            );
          })}
        </div>
      );
    }
    return null;
  }

  render() {
    const { content, isMobile } = this.props;
    const { showReply } = this.state;

    return (
      <div>
        <ContentItem
          isMobile={isMobile}
          content={content}
          onShowReply={this.handleToggleReply}
          showReply={showReply}
          commentId={content.id}
          action="reply" // 评论的回复
        />
        {this.renderReplies(
          content.replies,
          content.reply_count,
          content.isNoMoreReply
        )}
      </div>
    );
  }
}

CommentBox.propTypes = {
  commentId: PropTypes.string.isRequired
};

CommentBox.defaultProps = {};

export default Comment(CommentBox);