Reddit과 같은 중첩된 댓글 예제 만들기
2261 단어 javascriptcssreacthtml
이 게시물은 무엇에 관한 것입니까?
안녕하세요 휴머노이드 여러분. 오늘 우리는 React Js에서 기본 중첩 주석 구성 요소를 구현하려고 노력할 것입니다. 이 게시물은 필요한 최소한의 논리보다는 스타일링에 중점을 두지 않을 것입니다.
여기에서 앱을 확인하세요: Nested Comment
콘텐츠
각각에 대해 자세히 살펴보고 구현 방법을 살펴보겠습니다.
주석을 구성하는 방법
이 구현의 경우 플랫 구조를 사용하여 모든 주석을 저장합니다. 이렇게 하면 ID를 기반으로 댓글을 가져오는 것이 더 빨라집니다.
comments = {
id1 : comment1,
id2 : comment2
}
모든 댓글을 가져오는 방법
이 경우 중첩된 주석을 렌더링하는 데 사용할 수 있도록 기존 주석을 평면 구조에서 중첩된 구조로 개선합니다.
<script id="gist-ltag"src="https://gist.github.com/vigneshiyergithub/fd5afdcd6fedb23311501b0004752de9.js"/>
반응 댓글 구성 요소
기본 유틸리티 기능으로 기본 댓글 구성 요소를 만들어 봅시다
<script id="gist-ltag"src="https://gist.github.com/vigneshiyergithub/a2b50d46a929670a68e9f5934702eab7.js"/>
새 댓글 추가
새 댓글이 추가되면 parentNodeId를 기반으로 상위 노드를 업데이트하고 댓글 목록에 새 댓글을 추가할 수 있습니다.
<script id="gist-ltag"src="https://gist.github.com/vigneshiyergithub/b8542f514f414bbee570c5bcdec50af2.js"/>
결론
이 앱은 실제 응용 프로그램에 사용되는 새로운 구성 요소 학습의 일환으로 만들어졌습니다.
안전을 유지하고 다른 사람에게 손을 빌려주세요 :)
Reference
이 문제에 관하여(Reddit과 같은 중첩된 댓글 예제 만들기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/vigneshiyergithub/building-a-nested-comment-example-like-reddit-1o92텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
