留言板回复java 留言板回复再回复

最近开始写前端，这个评论回复功能自己写的，基本功能是可以实现，给需要的朋友们参考，也非常欢迎朋友们的指正。

1、先上效果图：

2、代码：

QaRecordList.js

render() {
    let actions = [
      <Button
        type="link"
        size={"small"}
        icon="close"
        onClick={this.onClickDeleteReply}
      >
        {"删除"}
      </Button>
    ];
    return this.props.dataCommentsRecord.map( (comment) => { 
      return (
        <QaRecord {...comment}
        >
          {comment.replys.map(reply => (
            <Reply key={reply.replyId} reply={reply} commentId={comment.commentId}/>
          ))}
        </QaRecord>
      );
    });
  }
}

QaRecord.js

render() {


    let closeBtn =
      this.props.commentState === 0 ? (
        <Button
          type="link"
          size={"small"}
          style={{ marginLeft: "10px" }}
          icon="stop"
          onClick={this.onClickClose}
        >
          {"关闭问题"}
        </Button>
      ) : (
        ""
      );

    let  checkReply = this.props.commentState!==undefined? (
      <a style={{ marginLeft: '30px'}} onClick={this.toggleCommentAndReply}>
        查看全部{this.props.count}条回复 <Icon type="down" />
      </a>
    ) : (
      ""
    )


    let actions = [
      <Button
        //styles={{marginLeft:'500px'}}
        type="link"
        size={"small"}
        // title="回复"
        icon="form"
        onClick={this.onClickReply}
      >
        {"回复"}
      </Button>,

      <Button
        type="link"
        size={"small"}
        style={{ marginLeft: "10px" }}
        icon="close"
        onClick={this.onClickDeleteComment}
      >
        {"删除"}
      </Button>,
       closeBtn,
       checkReply,  
     

    ];

    return (
      <div className={"qaRecord"}>
		
        <Comment style={{marginTop:'-20px'}}
          actions={actions}
          author={<a>{this.props.critic}</a>}
          avatar={
            <Avatar
              src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"
              alt="Han Solo"
            />
          }
          content={<p>{this.props.content}</p>}
   
          datetime={longToDate(this.props.time)}

          className={styles.customComment}         
        >         

          {this.state.isShowReply ? (
            <Editor
              onChange={this.handleChange}
              onSubmit={this.handleSubmit}
              submitting={this.state.submitting}
            />
          ) : (
            <div></div>
          )}

          {/* 显示回复 */}
          {this.props.children}
        </Comment>
      </div>
    );
  }
}

reply.js

render() {

    let actions = [
      <Button
        type="link"
        size={"small"}
        icon="close"
        onClick={this.onClickDeleteReply}
      >
        {"删除"}
      </Button>
    ];

    return <Comment
      actions={actions}
      author={<a>{this.props.reply.critic}</a>}
      avatar={
        <Avatar
          src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"
          alt="Han Solo"
        />
      }
      content={<p>{this.props.reply.content}</p>}
      datetime={longToDate(this.props.reply.time)}
      className={styles.customComment}
    />
  }