comment-vedio/src/components/ReplyItem/index.js

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

class ReplyItem extends Component {
  constructor(props) {
    super(props);
    this.state = {
      showInput: false
    };
    this.handleToggleInput = this.handleToggleInput.bind(this);
  }

  handleToggleInput() {
    this.setState({ showInput: !this.state.showInput });
  }

  render() {
    const { commentId, replyItem, replyId, action, app } = this.props;

    const { showInput } = this.state;

    return (
      <div className="reply-item">
        <div className="reply-item-content">
          @<strong>{replyItem.user_name}</strong>
          {replyItem.reply ? ` 回复 @${replyItem.reply.user_name}` : null}:
          &nbsp;
          {replyItem.content}
        </div>
        <div className="reply-item-icon">
          <span className="reply-item-span">
            <Icon
              type="heart"
              onClick={() => {
                if (replyId) {
                  // 如果有 replyId，则说明是评论的回复
                  app.sReplyFavor(replyItem.id, commentId, replyItem.favored);
                  return;
                }
                app.sCommentFavor(replyItem.id, replyItem.favored);
              }}
              className={
                replyItem.favored
                  ? "comment-favor comment-favored"
                  : "comment-favor"
              }
            />
            &nbsp; {replyItem.favor_count}
          </span>
          <span className="reply-item-span">
            <Icon type="message" onClick={this.handleToggleInput} /> &nbsp;{" "}
            {replyItem.reply_count || 0}
          </span>
        </div>
        {showInput && (
          <CommentInput
            content={app.children}
            action={action}
            replyId={replyId}
            commentId={commentId}
            callback={this.handleToggleInput}
          />
        )}
      </div>
    );
  }
}

export default Comment(ReplyItem);