“这是我参与8月更文挑战的第3天，活动详情查看：8月更文挑战”
前文推荐：react+egg+mysql 写一个评论组件（一）
前言
上一节主要设计了评论框组件的一些信息，此文主要介绍一下如何渲染出一个用户列表树
效果图
前端 用户留言列表渲染
本组件主要利用了antd的comment组件
设计思路
- 前端接收到后台的json数据 通过解析 去渲染评论树
- 首先要判断数哪些数据的状态时审核完成的 （即state==1）
- 分为2个函数 一个函数 为文章评论 一个为评论回复信息
- 点击回复的按钮的时候 还要判断出是哪个信息被回复 在该处下方显示出来回复框，用户点击回复 就将该条信息的id传给组件 通过判断id 是否与该条信息的评论id一致来决定 是否显示该个回复框。打开回复框的时候 并传入一个回复id 给评论框（主要用来传给数据库）
- 同时，还有一个父子组件传值的问题
父子组件传值
子组件
<Button htmlType="button" className ={cancelFlag ? "display-none" : "margin-r10"} onClick={props.closeComment}>
取消
</Button>
子组件点击 触发props.closeComment函数 父组件接收以后 触发该函数 关闭回复框。
父组件
// 关闭评论信息
function closeComment(){
setCommentId(0)
setReplyId(0)
}
<MessageModal {...props} closeComment={closeComment} replyId={comment}></MessageModal>
全部代码为下：
import React,{useState,useEffect} from 'react'
import {Avatar,Input,message,Comment} from 'antd'
import axios from 'axios';
import servicePath from '../config/apiUrl'
import MessageModal from './MessageModal';
const { TextArea } = Input;
function Message(props){
const [inputInfo,setInputInfo] = useState("")
const [messageList,setMessageList] = useState([])
const [articleId,setArticleId] = useState(props.id)
const [commentId,setCommentId] = useState(0) //设置回复的id 控制评论回复的显示与隐藏
const [replyId,setReplyId] = useState(0) //设置评论回复的id 控制评论回复的显示与隐藏
const [showComment,setShowComment] = useState(false)
const [messageLength,setMessageLength] = useState(0)
//文章id改变 重新获取文章评论
useEffect(()=>{
axios(servicePath.getCommenById+articleId).then(
(res)=>{
console.log(res.data.data)
let len = 0
res.data.data.map((item,index)=>{
if(item.state == 1){
len += 1
}
})
setMessageLength(len)
setMessageList(res.data.data)
}
)
},["articleId"])
// 主评论回复
// 评论回复
function replyInfo(commentId,replyId){
setReplyId(replyId)
setCommentId(commentId)
}
// 关闭评论信息
function closeComment(){
setCommentId(0)
setReplyId(0)
}
// 显示评论信息框
function addComment(){
return (
<div>
111
</div>
)
}
// 评论点赞
function addLikes(){
console.log(33)
}
// 渲染评论信息
const RecordList:any =()=>{
return messageList.map((item,index)=>{
if(item.state == 1){
return (
<Record {...item} key={index} >
</Record>
)
}
})
}
// 文章主评论
function Record(comment){
return(
<div className={"message-list-record"}>
<Comment
actions={[<span key="comment-nested-reply-to" onClick={addLikes}>赞 {comment.likes && comment.likes > 0 ? comment.likes :""}</span>,<span key="comment-nested-reply-to" onClick={()=>{replyInfo(comment.comment_id,"")}}>回复</span>]}
author={<span className="comment-nested-name">{comment.name}<a>{comment.createtime}</a></span>}
avatar={
<Avatar
src={comment.img_url}
alt="Han"
/>
}
content={
<p>
{comment.content}
</p>
}
>
{commentId === comment.comment_id &&(
<MessageModal {...props} closeComment={closeComment} replyId={comment}></MessageModal>
)}
{/* {comment.replys} */}
<div className="message-list-replay">
{comment.replys.map((item,index) => {
if(item.state == 1){
return(
<Reply {...item} key={index} />
)
}
}
)}
</div>
</Comment>
</div>
)
}
// 回复评论
function Reply(reply){
return(
<Comment
actions={[<span key="comment-nested-reply-to" onClick={addLikes}>赞 {reply.likes && reply.likes > 0 ? reply.likes : ""}</span>,<span key="comment-nested-reply-to" onClick={()=>{replyInfo("",reply.id)}}>回复</span>]}
author={<span className="comment-nested-name">{reply.name}<a>{reply.createtime}</a></span>}
avatar={
<Avatar
src={reply.img_url}
alt="Han"
/>
}
content={
<p>
<span className="reply_name">@{reply.Rname}:</span> {reply.content}
</p>
}
>
{replyId === reply.id &&(
// 获取该条评论的user_id 然后设为reply_id, user_id为本人的id
<MessageModal {...props} closeComment={closeComment} replyId={reply}></MessageModal>
)}
{/* {reply.replys.map((item,index) => (
<Reply {...item} key={index} />
))} */}
</Comment>
)
}
return(
<div className="messsage-box">
<div className="messsage-box-head">
<MessageModal {...props}></MessageModal>
</div>
<div className="message-list">
<div className="message-list-head">
<div className={messageLength > 0 ? "message-list-head-title" : "display-none"}>
评论列表
</div>
<div className="message-list-head-num">
{messageLength} 条评论
</div>
</div>
<RecordList>
</RecordList>
</div>
</div>
)
}
export default Message
