使用递归法写多级评论的代码前端

假设你的评论数据结构如下：

const comments = [
  { id: 1, text: '第一层评论1', children: [
    { id: 2, text: '第二层评论1', children: [] },
    { id: 3, text: '第二层评论2', children: [
      { id: 4, text: '第三层评论1', children: [] },
      { id: 5, text: '第三层评论2', children: [] }
    ] }
  ] },
  { id: 6, text: '第一层评论2', children: [] }
];

可以使用递归函数来渲染多级评论：

function renderComments(comments) {
  return (
    <ul>
      {comments.map(comment => (
        <li key={comment.id}>
          <div>{comment.text}</div>
          {renderComments(comment.children)}
        </li>
      ))}
    </ul>
  );
}

// 在组件中使用
function Comments() {
  return renderComments(comments);
}

这样就可以递归地渲染多级评论了。