• 카테고리

    질문 & 답변
  • 세부 분야

    풀스택

  • 해결 여부

    미해결

댓글부분 구현시 Comment가 적용되지 않는 부분

23.07.03 18:15 작성 조회수 417

9

댓글 구현하기 수강 중에 제로초님께서 antd의 <Comment />를 import 하여 적용하는데 안 되시는 분들은 List.Item과 List.Item.Meta를 이용해서 만들어보세요.

제 경우 antd를 최신버전으로 사용하고 있는데 공식문서를 보니 Comment는 없습니다. 대신 List 컴포넌트에 List.Item과 List.Item.Meta가 있는데 이걸 이용해 댓글 컴포넌트를 만들 수 있습니다.

 

{commentFormOpened && (
        <div>
          <CommentForm post={post} />
          <List
            header={`${post.Comments.length}개의 댓글`}
            itemLayout="horizontal"
            dataSource={post.Comments}
            renderItem={(item) => (
                // 강의에서는 <li></li>로 사용하고 있습니다.
              <List.Item>
                {/* 강의에서는 <Comment />로 사용하고 있습니다. */}
                <List.Item.Meta
                // author => title로, content => description으로 적용하면 강의에서 보는 UI와 똑같아요.
                  title={item.User.nickname}
                  avatar={<Avatar>{item.User.nickname[0]}</Avatar>}
                  description={item.content}
                />
              </List.Item>
            )}
          />
        </div>
      )}

답변 2

·

답변을 작성해보세요.

0

메롱이님의 프로필

메롱이

2023.08.07

헉 감사합니다 ㅠㅠ 한시간동안 찾아봐도 해결이 안되서 질문에 들어왔는데 바로 해결되었네요ㅜㅜ

 

0

쾌할한 전복님의 프로필

쾌할한 전복

2023.07.09

감사합니다