Как вывести на страницу вложенные комментарии на React?

Question

[Даниил Сугоняев]

Стоит задача выводить комментарии на страницу. С сервера приходит следующий JSON:

"comments": [
    {
        "id": 92241,
        "text": "Поздравляю и желанию дальнейшего процветания. Успехов и всего самого наилучшего. Ваша новость еще раз свидетельство того, что все под силу изменить, если нас много и мы едины.",
        "edit_link": "http://localhost:8006/admin/comments/comment/92241/change/",
        "level": 0,
        "allow_reply": true,
        "replies": []
    },
    {
        "id": 92241,
        "text": "Поздравляю и желанию дальнейшего процветания. Успехов и всего самого наилучшего. Ваша новость еще раз свидетельство того, что все под силу изменить, если нас много и мы едины.",
        "edit_link": "http://localhost:8006/admin/comments/comment/92241/change/",
        "level": 0,
        "allow_reply": true,
        "replies": [
            {
                "id": 92241,
                "text": "Поздравляю и желанию дальнейшего процветания. Успехов и всего самого наилучшего. Ваша новость еще раз свидетельство того, что все под силу изменить, если нас много и мы едины.",
                "edit_link": "http://localhost:8006/admin/comments/comment/92241/change/",
                "level": 0,
                "allow_reply": true,
                "replies": []
            },
            {
                "id": 92241,
                "text": "Поздравляю и желанию дальнейшего процветания. Успехов и всего самого наилучшего. Ваша новость еще раз свидетельство того, что все под силу изменить, если нас много и мы едины.",
                "edit_link": "http://localhost:8006/admin/comments/comment/92241/change/",
                "level": 0,
                "allow_reply": true,
                "replies": [
                    {
                        "id": 92241,
                        "text": "Поздравляю и желанию дальнейшего процветания. Успехов и всего самого наилучшего. Ваша новость еще раз свидетельство того, что все под силу изменить, если нас много и мы едины.",
                        "edit_link": "http://localhost:8006/admin/comments/comment/92241/change/",
                        "level": 0,
                        "allow_reply": true,
                        "replies": []
                    }
                ]
            }
        ]
    }
]

Я понимаю, что в компоненте нужно запустить рекурсию, но до конца не понимаю как прописать условие чтобы не уйти в бесконечный цикл.
Сейчас делаю так
В родителе:

{this.props.comments.map((item, id) => {
                    return (
                        <div className="talk-branch">
                            <Comment {...item} />
                        </div>
                    )
                })}

В компоненте:

var Comment = class Comment extends React.Component {

    render() {
        const { fullname, date, text, replies } = this.props;
        return (<div className="talk-branch__item">
            <div className="talk-branch-main">
                <div className="talk-branch__avatar">
                    <img src="https://www.fursk.ru/static/img/talk/woman_avatar.png" alt="avatar"/>
                </div>
                <div className="talk-branch__body">
                    <div className="talk-branch__body-author" itemType="http://schema.org/Person" itemProp="author">
                        <span className="talk-branch__body-name" itemProp="name">{fullname}</span>
                    </div>
                    <div className="talk-branch__date">
                        <time itemProp="datePublished" datetime={date}>
                            {date}
                        </time>
                    </div>
                    <div className="talk-branch__text" itemProp="reviewBody">
                        {text}
                    </div>
                    <div className="talk-branch__reply">
                        <div onClick={this.toggleForm}>Ответить</div>
                    </div>
                </div>
            </div>
           {replies && replies.length !== 0 ?
                replies.map((item, id) => {
                    return <Comment {...item} />
                })
            :
            false}
        </div>)
    }
}
export default Comment;

Answer 1

[Владимир Проскурин]

Вы в компоненте при вызове самого себя не передаете комментарий. Еще бы хорошо сделать так, чтобы вызов Comment происходил только при наличии комментариев. Да и в комменте вы один раз вызываете Comment, а не список комментов.
Я бы сделал так. Создал компонент CommentList, в нем сделал вызов текущих комментов Comment в цикле. И в компоненте Comment сделал проверку на наличие комментов, если они есть, вызывал бы CommentList (передавая ему список комментов), тот в свое время опять циклом пройдет по комментам и вызовет компонент Comment, и.т.д.

Comments

[Даниил Сугоняев]

Немного подправил реализацию. Теперь есть проверка и выводится первый уровень комментариев. Если брать текущую реализацию, каким образом прокинуть пропсы в рекурсивный компонент. Если я просто передаю this.props.replies, ухожу в бесконечный цикл

[Владимир Проскурин]

Даниил Сугоняев, смотрите https://jsfiddle.net/8ncgmq27/

[Даниил Сугоняев]

Спасибо большое за наглядную реализацию. Я пришел к этому решению без создания доп. компонента, мне кажется так лаконичнее

{replies && replies.length !== 0 ?
                replies.map((item, id) => {
                    return <Comment {...item} />
                })
            :
            false}

[Владимир Проскурин]

Даниил Сугоняев, сложно согласиться, т.к. такие сущности должны разбиваться на компоненты. А если захочется в другом месте вывести массив комментариев? Придется опять использовать этот цикл, а можно было просто вызывать компонент CommentList и передать ему комменты.

[Даниил Сугоняев]

Владимир Проскурин, хм.. Действительно, спасибо, лучше добавлю обертку