import React , { useState } from 'react' ; import styles from './index.scss' ; import { CommentItem , ReplyItem } from '@views/ArticleList/ArticleItem' ; import DiscussItem from './DiscussItem' ; interface IProps { commentList : CommentItem [ ] ; userInfo : IUserStore . UserInfo ; setDiscussReply : ( commentId : number , replyItem : ReplyItem ) => void ; setDeleteDiscussReply : ( commentId : number , replyId ? : number , isReply ? : boolean ) => void ; } const DiscussList = ( { commentList , userInfo , setDiscussReply , setDeleteDiscussReply } ) => { const [ replyTargetUserId , setReplyTargetUserId ] = useState < number > ( null ) ; const [ replyTargetCommentId , setReplyTargetCommentId ] = useState < number > ( null ) ; const [ replyTargetReplyUserId , setReplyTargetReplyUserId ] = useState < number > ( null ) ; const [ replyTargetReplyId , setReplyTargetReplyId ] = useState < number > ( null ) ; const onReplyComment = ( userId , commentId ) => { setReplyTargetUserId ( userId ) ; setReplyTargetCommentId ( commentId ) ; } ; const onReplyReply = ( userId , commentId ) => { setReplyTargetReplyUserId ( userId ) ; setReplyTargetReplyId ( commentId ) ; } ; return ( < div className = { styles . commentListContainer } > { commentList . map ( item => ( < DiscussItem replyTargetUserId = { replyTargetUserId } replyTargetCommentId = { replyTargetCommentId } onReplyComment = { onReplyComment } data = { item } key = { item . id } userInfo = { userInfo } setDiscussReply = { setDiscussReply } commentId = { item . id } setDeleteDiscussReply = { setDeleteDiscussReply } > { item . replies . map ( reply => ( < DiscussItem replyTargetUserId = { replyTargetReplyUserId } replyTargetCommentId = { replyTargetReplyId } onReplyComment = { onReplyReply } data = { reply } key = { reply . id } userInfo = { userInfo } isReply setDiscussReply = { setDiscussReply } commentId = { item . id } setDeleteDiscussReply = { setDeleteDiscussReply } / > ) ) } < /DiscussItem>))} < /div>); } ; export default DiscussList ;