如何渲染包含关联关系值的JSON评论数据？

要把带parent_id关联的扁平评论数组渲染成层级结构，分两步处理即可：先把数据转成树形结构，再递归渲染这个结构。

1. 转换扁平数组为树形结构 #

先通过映射表快速定位父评论，将子评论挂载到对应父评论的children数组中，最终得到根评论列表：

function buildCommentTree(comments) {
  const commentMap = {};
  const rootComments = [];

  // 初始化每个评论的映射项，添加children数组
  comments.forEach(comment => {
    commentMap[comment.id] = { ...comment, children: [] };
  });

  // 关联父子评论
  comments.forEach(comment => {
    if (comment.parent_id) {
      commentMap[comment.parent_id].children.push(commentMap[comment.id]);
    } else {
      rootComments.push(commentMap[comment.id]);
    }
  });

  return rootComments;
}

// 处理你的JSON数据
const rawComments = yourJsonData.data.comments;
const commentTree = buildCommentTree(rawComments);

2. 递归渲染层级评论 #

根据你使用的技术栈，选择对应的渲染方式：

React 组件渲染 #

用递归组件渲染树形结构，自动处理嵌套层级：

function Comment({ comment }) {
  return (
    <div className="comment">
      <p>{comment.text}</p>
      {/* 渲染子评论 */}
      {comment.children.length > 0 && (
        <div className="replies">
          {comment.children.map(child => (
            <Comment key={child.id} comment={child} />
          ))}
        </div>
      )}
    </div>
  );
}

// 评论列表容器组件
function CommentList() {
  const commentTree = buildCommentTree(yourJsonData.data.comments);
  return (
    <div className="comment-list">
      {commentTree.map(comment => (
        <Comment key={comment.id} comment={comment} />
      ))}
    </div>
  );
}

原生JS DOM渲染 #

直接操作DOM，递归生成评论节点：

function renderComment(comment, container) {
  const commentDiv = document.createElement('div');
  commentDiv.className = 'comment';
  commentDiv.innerHTML = `<p>${comment.text}</p>`;

  // 渲染子评论区
  if (comment.children.length > 0) {
    const repliesDiv = document.createElement('div');
    repliesDiv.className = 'replies';
    comment.children.forEach(child => {
      renderComment(child, repliesDiv);
    });
    commentDiv.appendChild(repliesDiv);
  }

  container.appendChild(commentDiv);
}

// 页面中调用
const commentTree = buildCommentTree(yourJsonData.data.comments);
const container = document.getElementById('comment-container');
commentTree.forEach(comment => {
  renderComment(comment, container);
});

基础样式示例 #

添加CSS让层级关系更直观：

.comment {
  margin: 12px 0;
  padding: 10px;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
}

.replies {
  margin-left: 24px;
}

内容的提问来源于stack exchange，提问作者Renato