123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122 |
- import React from "react";
- import { getComment } from "@services/comment";
- import { CommentContext, DefaultValue } from "./context";
- import CommentList from "./CommentList";
- import styles from "./index.less";
-
- export class CommentCombine extends React.PureComponent {
- constructor(props) {
- super(props);
- this.state = {
- ...DefaultValue,
- locale: props.locale || "zh",
- currentUser: props.currentUser || null,
- };
- }
-
- static getDerivedStateFromProps(props, state) {
- return {
- locale: props.locale,
- currentUser: props.currentUser,
- };
- }
-
- 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}
- onChangeListItem={({ commentId, changeProp }) => {
- const newList = list.map(i => {
- if (i.id === commentId) {
- return {
- ...i,
- ...changeProp,
- };
- }
- return i;
- });
- this.setState({
- comment_data: {
- ...this.state.comment_data,
- list: newList,
- }
- })
- }}
- topDivider
- />
- );
- };
-
- 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;
|