React‑компонент для вывода комментариев с произвольной глубиной вложения

Условие

Требуется создать React‑компонент Comments, который получает единственный проп — массив комментариев (comments). Каждый элемент массива представляет собой объект, обязательные свойства которого — id и text. Кроме того, объект может содержать опциональное свойство children — массив вложенных комментариев того же формата. Компонент обязан отрисовать список комментариев, выводя текст (text) каждого элемента. Если у комментария присутствует массив children, его элементы должны отображаться как вложенный список под соответствующим родительским пунктом. Вложенность комментариев может быть любой, без ограничения по уровням.

import React from "react";

let comments = [
  {
    id: 1,
    text: "message 1",
  },
  {
    id: 2,
    text: "message 2",
    children: [
      {
        id: 4,
        text: "message 4",
        children: [
          {
            id: 7,
            text: "message 7",
          },
          {
            id: 8,
            text: "message 8",
            children: [
              {
                id: 9,
                text: "message 9",
              },
              {
                id: 10,
                text: "message 10",
              },
            ],
          },
        ],
      },
    ],
  },
  {
    id: 5,
    text: "message 5",
  },
];

const App = () => {
  return (
    <div className="App">
      <Comments comments={comments} />
    </div>
  );
};

export default App;

Компонент должен рекурсивно обходить структуру данных и корректно отображать любые уровни вложенности, используя вложенные списки или любые другие подходящие элементы разметки.

Ответ

Выведите комментарии через map, а для children рекурсивно вызовите тот же Comments. Каждый элемент списка должен иметь устойчивый key.

function Comments({ comments }) {
  return (
    <ul>
      {comments.map(comment => (
        <li key={comment.id}>
          <p>{comment.text}</p>
          {comment.children?.length > 0 && (
            <Comments comments={comment.children} />
          )}
        </li>
      ))}
    </ul>
  );
}

Ожидается конечное дерево без циклов, id уникальны среди соседей. Текст выводится как текст React, без небезопасной вставки HTML. Алгоритм посещает каждый комментарий один раз; «любая глубина» означает отсутствие заданного лимита уровней, а не бесконечные ресурсы браузера. Для огромных веток нужны сворачивание и поэтапная загрузка.