Redditのようなネストされたコメント例のビルド

このポストは何ですか。

ハローフェロー.今日、我々は反応JSに基本的な入れ子になったコメントコンポーネントを実装しようとします.このポストは、必要最小限のロジックではなく、スタイリングに集中することはありません.
ここでアプリをチェックアウト:Nested Comment

内容

コメントの構造

どのようにすべてのコメントを取得する

コメントコメントコンポーネント

新しいコメントの追加

それぞれの1つに深いダイビングを行って、それが実装された方法を探ることができます.

コメントの構造

この実装では、すべてのコメントを格納するためにフラット構造を使用します.この方法は、IDに基づいてコメントを取得するのが速いでしょう.
< div >
< br/>
クラスをハイライト表示する

comments = {
  id1 : comment1,
  id2 : comment2
}

< div >

どのようにすべてのコメントを取得する

この場合、入れ子になったコメントをレンダリングするためにフラット構造からネスト構造への既存のコメントを高めることができます.p >
< div class ="LagagCount - gig - Link - tag "
"スクリプトのID "https://gist.github.com/vigneshiyergithub/fd5afdcd6fedb23311501b0004752de9.js//>
< div >

コメントコメントコンポーネント

< bf >基本的なユーティリティ関数を作成しましょう
< div class ="LagagCount - gig - Link - tag "
"スクリプトのID "https://gist.github.com/vigneshiyergithub/a2b50d46a929670a68e9f5934702eab7.js//>
< div >

新しいコメントの追加

新しいコメントが追加されると、ParentNodeIDに基づいて親ノードを更新し、コメントリストに新しいコメントを追加します.p >
< div class ="LagagCount - gig - Link - tag "
"スクリプトのID "https://gist.github.com/vigneshiyergithub/b8542f514f414bbee570c5bcdec50af2.js//>
< div >

結論

このアプリは、実際の生活アプリケーションで使用されている新しいコンポーネントを学習の一部として行われましたbr/>
安心して手を貸してください
<ウル>

Neste comments App

Project Source

Vignesh Iyer

< ull >