bilingo-ui/src/components/comment/index.jsx

import React from 'react';
import { getComment } from '@/services/comment';
import { CommentContext, DefaultValue } from './context';
import styles from './index.less';
import CommentList from './CommentList';

export class CommentCombine extends React.PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      ...DefaultValue,
    }
  }

  render() {
    return (
      <CommentContext.Provider value={this.state}>
        <Comment />
      </CommentContext.Provider>
    )
  }
}

export class Comment extends React.PureComponent {
  static contextType = CommentContext;
  static propTypes = {}
  static defaultProps = {}

  constructor(props) {
    super(props);
    this.state = {
      comment_data: null,
    };
  }

  componentDidMount = async () => {
    const { type, limit, page, bussiness_id } = this.context;
    const res = await getComment({
      type,
      limit,
      page,
      businessId: bussiness_id,
    });
    console.log("res:", res);
    this.setState({
      comment_data: res,
    })
  }

  renderCommentList = (list) => {
    // content: "[e101][e102]"
    // created: 1582352617
    // favor_count: 0
    // favored: false
    // id: "5e50c8e9818eda000192773d"
    // is_speak: false
    // medias: null
    // replies: []
    // reply_count: 0
    // user_avatar: "https://links123-images.oss-cn-hangzhou.aliyuncs.com/avatar/2020/2/7/1326acc4b1609c8ecf52e94d58a38384.jpg?x-oss-process=image/resize,h_100"
    // user_id: 71770
    // user_name: "EvoKou"
    return <CommentList list={list} />
  }

  renderComment = () => {
    const { comment_data } = this.state;
    if (comment_data === null) return "数据载入中";
    const { list, total, page } = comment_data;
    return (
      <div>
        total: {total}
        page: {page}
        <div>
          {
            this.renderCommentList(list)
          }
        </div>
      </div>
    )
  }

  render() {
    console.log("context", this.context);
    return (
      <div>
        {JSON.stringify(this.context)}
        {this.renderComment()}
      </div>
    )
  }
}

export default CommentCombine;