No Description

index.jsx 2.7KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122
  1. import React from "react";
  2. import { getComment } from "@services/comment";
  3. import { CommentContext, DefaultValue } from "./context";
  4. import CommentList from "./CommentList";
  5. import styles from "./index.less";
  6. export class CommentCombine extends React.PureComponent {
  7. constructor(props) {
  8. super(props);
  9. this.state = {
  10. ...DefaultValue,
  11. locale: props.locale || "zh",
  12. currentUser: props.currentUser || null,
  13. };
  14. }
  15. static getDerivedStateFromProps(props, state) {
  16. return {
  17. locale: props.locale,
  18. currentUser: props.currentUser,
  19. };
  20. }
  21. render() {
  22. return (
  23. <CommentContext.Provider value={this.state}>
  24. <Comment />
  25. </CommentContext.Provider>
  26. );
  27. }
  28. }
  29. export class Comment extends React.PureComponent {
  30. static contextType = CommentContext;
  31. static propTypes = {};
  32. static defaultProps = {};
  33. constructor(props) {
  34. super(props);
  35. this.state = {
  36. comment_data: null,
  37. };
  38. }
  39. componentDidMount = async () => {
  40. const { type, limit, page, bussiness_id } = this.context;
  41. const res = await getComment({
  42. type,
  43. limit,
  44. page,
  45. businessId: bussiness_id,
  46. });
  47. console.log("res:", res);
  48. this.setState({
  49. comment_data: res,
  50. });
  51. };
  52. renderCommentList = (list) => {
  53. // content: "[e101][e102]"
  54. // created: 1582352617
  55. // favor_count: 0
  56. // favored: false
  57. // id: "5e50c8e9818eda000192773d"
  58. // is_speak: false
  59. // medias: null
  60. // replies: []
  61. // reply_count: 0
  62. // user_avatar: "https://links123-images.oss-cn-hangzhou.aliyuncs.com/avatar/2020/2/7/1326acc4b1609c8ecf52e94d58a38384.jpg?x-oss-process=image/resize,h_100"
  63. // user_id: 71770
  64. // user_name: "EvoKou"
  65. return (
  66. <CommentList
  67. list={list}
  68. onChangeListItem={({ commentId, changeProp }) => {
  69. const newList = list.map(i => {
  70. if (i.id === commentId) {
  71. return {
  72. ...i,
  73. ...changeProp,
  74. };
  75. }
  76. return i;
  77. });
  78. this.setState({
  79. comment_data: {
  80. ...this.state.comment_data,
  81. list: newList,
  82. }
  83. })
  84. }}
  85. topDivider
  86. />
  87. );
  88. };
  89. renderComment = () => {
  90. const { comment_data } = this.state;
  91. if (comment_data === null) return "数据载入中";
  92. const { list, total, page } = comment_data;
  93. return (
  94. <div>
  95. total: {total}
  96. page: {page}
  97. <div>{this.renderCommentList(list)}</div>
  98. </div>
  99. );
  100. };
  101. render() {
  102. console.log("context", this.context);
  103. return (
  104. <div>
  105. {JSON.stringify(this.context)}
  106. {this.renderComment()}
  107. </div>
  108. );
  109. }
  110. }
  111. export default CommentCombine;