0

サイト全体でオーディオトラックの配列を共有するために、useContext および setState フックを使用しています。グローバルプレイリストにトラックを追加/削除できるいくつかのプレイリストコンポーネントと、現在の終了時に次のトラックを取得できるオーディオ要素のラッパーがあります。

プレイリストはすべて同じコンポーネントを使用します。各トラックは、基本的に、 id、タイトル、url などを含む<tr>単なるです。<td>json を使用してこれらを生成します。

ここで私の質問は、フックで何を渡す必要があるかということです。少なくとも 3 つのオプションが表示されるため、

  • track_id を渡すのが最も効率的ですが..しかし、トラック データが必要なときはいつでも..たとえば、URL を取得したりレンダリングしたりするために、json バックエンドのどこにでもネストされている可能性のあるオブジェクトを見つける必要があります。

  • dom-node を渡すのは間違っているように見えます...しかし、リストを別の場所にレンダリングしたい場合には、非常に使いやすいでしょう。

  • track json オブジェクトを渡すと.. いつでも必要なすべてのデータを持っています.. しかし、どういうわけかそれをすべての track dom ノードにアタッチする必要があります.. そして、それも正しくないようです..

オプション1。track.json オブジェクト

     {"title":"...","artist":"...","year":"..."}

オプション #2。<tr>domノード

     <tr><td>title</td><td>arist</td><td>year</td></tr>

     key={track_id}

今、私は明らかにベストプラクティスに従い、可能な限り効率的になりたいと思っています..誰かが私を正しい方向に向けることができますか

4

1 に答える 1