npmcomment/src/components/CommentList/index.js

import React, { Component } from "react";
import { Spin, Pagination } from "antd";
import Comment from "../../Comment";
import CommentBox from "../CommentBox";
import "./index.css";
import { LIMIT } from "../../constant";

class CommentList extends Component {
  constructor(props) {
    super(props);
    this.state = {};
  }

  componentWillMount() {
    this.props.app.sGetComment({ page: this.props.app.page });
  }

  renderPagination() {
    const {
      list,
      total,
      page,
      pageType,
      isNoMoreComment,
      sGetComment,
      onPageChange
    } = this.props.app;
    if (pageType === "more") {
      if (!isNoMoreComment && list.length !== total) {
        return (
          <div
            className="comment-list-show-more"
            onClick={() => {
              sGetComment({ page: page + 1 });
              onPageChange(page + 1);
            }}
          >
            <span>查看更多评论</span>
          </div>
        );
      } else {
        return null;
      }
    } else if (pageType === "pagination") {
      return (
        <div className="comment-list-pagination">
          <Pagination
            pageSize={LIMIT}
            current={page}
            total={total}
            onChange={p => {
              sGetComment({ page: p });
              onPageChange(p);
            }}
          />
        </div>
      );
    }
  }

  render() {
    const { list, total, loading } = this.props.app;

    const spinning = Boolean(
      loading.sGetComment || loading.sCommentFavor || loading.sReplyFavor
    );
    return (
      <div>
        <Spin spinning={spinning}>
          <div>共 {total} 条评论</div>
          {list.map(item => (
            <CommentBox content={item} key={item.id} commentId={item.id} />
          ))}
          {this.renderPagination()}
        </Spin>
      </div>
    );
  }
}

CommentList.propTypes = {};

export default Comment(CommentList);