실생활 예 - 재귀 구성 요소
6098 단어 recursionjavascriptreactwebdev
달성하고자 하는 최종 결과는 다음과 같습니다.
가장 먼저 볼 수 있는 것은 모든 댓글 본문이 매우 유사하다는 것입니다. 이는 모든 웹 개발자에게 일반 구성 요소를 비명을 지릅니다!
재귀적 구성 요소
const Comment = ({ comment }) => {
const { index, comments } = comment;
const hasComments = !!comments.length;
return (
<React.Fragment>
<CommentBody {...comment}/>
{hasComments && (
<ul className={styles.comments}>
{comments.map(comment => (
<li key={comment.index}>
<Comment key={index} comment={comment} />
</li>
))}
</ul>
)}
</React.Fragment>
);
};
——
코드 분석
CommentBody
구성 요소는 단일 댓글의 UI이며 하위 댓글이 있는 경우 모든 하위 댓글과 함께 ul
를 렌더링하고 해당 댓글 중 하나에도 댓글이 있는 경우 해당 항목을 렌더링합니다. 너무 등등...모든 재귀에는 중지 조건이 있어야 합니다.
여기서
hasComments
는 댓글에 더 많은 댓글이 있는지 확인합니다.구성 요소를 사용하려면 재귀 객체를 전달해야 합니다. 이 경우 다음과 같이 표시됩니다.
const nestedComments = {
index: 0,
title: "'title1',"
comments: [
{
index: 1,
title: 'title2'
},
{
index: 2,
title: "'title3',"
comments: [
{
index: 3,
title: 'title4'
}
]
}
]
};
const Comments = () => (
<section>
<Comment comment={nestedComments}/>
</section>
);
결론
재귀 설계에는 -> 재귀 데이터가 필요한 -> 재귀 구성 요소가 필요하다는 것을 알 수 있습니다.
Reference
이 문제에 관하여(실생활 예 - 재귀 구성 요소), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/danielbellmas/real-life-example-recursive-components-9je텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)