Я хотел бы создать доску для комментариев, которая позволит пользователям оставлять комментарии и отвечать на них. Я сделал песочницу здесь:

https://codesandbox.io/s/reactjs-materialize-me1it

И вот некоторые фрагменты кода, которые я использую:

{this.state.posts.map(post ={amp}gt; { if (post.id !== "" {amp}amp;{amp}amp; post.respondingToComment === "none") { return ( {amp}lt;div style={{ padding: "20px" }}{amp}gt; {amp}lt;div className="col s12" style={{ padding: "5px" }} /{amp}gt; {amp}lt;div id={post.id}{amp}gt; {amp}lt;div className="col s12"{amp}gt;{post.content}{amp}lt;/div{amp}gt; {amp}lt;div className="col s12"{amp}gt; {post.name} {amp}lt;i className="material-icons" style={{ cursor: "pointer" }} onClick={() ={amp}gt; this.replyToComment(post.id)} {amp}gt; reply {amp}lt;/i{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; { (console.log(this.state.posts), typeof this.state.posts.filter( x ={amp}gt; x.respondingToComment === post.id )[0] !== "undefined" ? ( this.state.posts.map(response ={amp}gt; { if (response.respondingToComment === post.id) { return this.loadCommentReponses(response); } }) ) : ( {amp}lt;span /{amp}gt; )) } {amp}lt;/div{amp}gt; ); } })} 

Код ответа:

 loadCommentReponses(post) { return ( {amp}lt;div style={{ padding: "20px" }}{amp}gt; {amp}lt;div className="col s12" style={{ padding: "5px" }} /{amp}gt; {amp}lt;div id={post.id}{amp}gt; {amp}lt;div className="col s12"{amp}gt;{post.content}{amp}lt;/div{amp}gt; {amp}lt;div className="col s12"{amp}gt; {post.name} {amp}lt;i className="material-icons" style={{ cursor: "pointer" }} onClick={() ={amp}gt; this.replyToComment(post.id)} {amp}gt; reply {amp}lt;/i{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; {typeof this.state.posts.filter( x ={amp}gt; x.respondingToComment === post.id )[0] !== "undefined" ? ( this.state.posts.map(response ={amp}gt; { if (response.respondingToComment === post.id) { return this.loadCommentReponses(response); } }) ) : ( {amp}lt;span /{amp}gt; )} {amp}lt;/div{amp}gt; ); } 

Код работает так, как я хочу, но я хотел бы иметь возможность рисовать вертикальную линию для обозначения родительских комментариев — подобно тому, как это делает reddit:

 parent comment | child comment | | child comment | | | child comment | | child comment | child comment | | child comment... 

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

Благодарность!!