[英]Javascript - how can I make this recursive?
I have a function to render comments, in which each comment is stored as an object in an array.我有一个 function 来呈现评论,其中每个评论都存储为一个数组中的 object。 Comments can have reply comments, in which they have the exact same html and data to render, just their styling is different (via a CSS modifier class).
评论可以有回复评论,其中它们具有完全相同的 html 和要渲染的数据,只是它们的样式不同(通过 CSS 修饰符类)。
How can I make this function recursive ?我怎样才能使这个 function递归? The
renderReplies(comment.replies)
calls a function that is the exact same as renderComments
function, just without the mentioned function call renderReplies
(as a reply to a reply is the exact same also in styling terms). renderReplies(comment.replies)
调用一个renderReplies
,它与renderComments
function 完全相同,只是没有提到的 ZC1C425268E68385D1AB5074C17A94F14
const renderComments = (comments) => {
commentsElement.innerHTML = '';
comments.forEach(comment => {
commentsElement.innerHTML += html;
// data-id attribute
const liElements = commentsElement.querySelectorAll('.comment');
const liElement = liElements.item(liElements.length - 1);
liElement.setAttribute('data-id', comment.id);
// author
liElement.querySelector('.comment__author').innerHTML = comment.user.username;
// avatar src & alt attributes
const avatar = liElement.querySelector('.comment__avatar');
avatar.setAttribute('src', comment.user.image.png);
avatar.setAttribute('alt', comment.user.username);
// time since posted
// content
const p = liElement.querySelector('.comment__text');
p.appendChild(document.createTextNode(comment.content));
// score
liElement.querySelector('.comment__score b').innerHTML = comment.score;
// replies
renderReplies(comment.replies);
});
};
Check whether there's a replies
property.检查是否有
replies
属性。 If it exists, call the function recursively.如果存在,则递归调用 function。 Since replies won't have replies of their own, you'll stop there.
由于回复不会有自己的回复,因此您将停在那里。
const renderComments = (comments) => {
commentsElement.innerHTML = '';
comments.forEach(comment => {
commentsElement.innerHTML += html;
// data-id attribute
const liElements = commentsElement.querySelectorAll('.comment');
const liElement = liElements.item(liElements.length - 1);
liElement.setAttribute('data-id', comment.id);
// author
liElement.querySelector('.comment__author').innerHTML = comment.user.username;
// avatar src & alt attributes
const avatar = liElement.querySelector('.comment__avatar');
avatar.setAttribute('src', comment.user.image.png);
avatar.setAttribute('alt', comment.user.username);
// time since posted
// content
const p = liElement.querySelector('.comment__text');
p.appendChild(document.createTextNode(comment.content));
// score
liElement.querySelector('.comment__score b').innerHTML = comment.score;
// replies
if (comment.hasOwnProperty("replies")) {
renderComments(comment.replies);
}
});
};
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.